Vue.jsのcreated()とmounted()の違いについて調べた

Vue.jsのcreated()とmounted()の違いがわからなかったので,勉強がてらライフサイクルフックについて調べました．
参考：ライフサイクルフックとは

ライフサイクルフックとは

Vue.jsの初期化の中の決まったタイミングで実行される関数.
初期化とはvue.jsが使えるようになるまでのvue.jsの内部で行われる処理のことです。WindowsやMac OSが起動するときに接続しているデバイスを認識したらサービスを起動したりするためにユーザが利用できるまで少し時間がかかります。Vue.jsでも同様にユーザが利用できるまでに内部でさまざまな初期化の処理が行われます。

Vue.jsが適用される対象要素において，どのタイミングでVue.jsを実行するかをプログラムに記述することでVue.jsが動く．

elとは

Vueライフサイクルの中で出てくるelってなんなん？

elはVue.jsがマウントを行う要素

よく見るel: "#app" をすることで，elを指定した要素の中でのみvue.jsを動かせる（ちなみにapp は任意の文字列に変更可）．
LaravelではApp.jsにel を指定することで，コンポーネントファイルをVue.jsを記述できるようになっている．

elには何が入ってる？

consoleでthis.$el の中身を確認してみる

<div id="app">
	<p>Hello World!</p>
</div>

new Vueしたインスタンスで指定した中身を指していることが分かります．

本題

ライフサイクルフックのどのタイミングでcreated とmounted は実行されるか？
→this$el を使って調べる．
DOM要素がない=this$elは存在しない．

created() {
    console.log('created');
    console.log(this.$el);
  },
  mounted() {
    console.log('mounted');
    console.log(this.$el);
	}

結果をコンソールで確認

created はDOMがレンダリングされる前に実行され，mouted はDOMがレンダリングされた後に実行される．
これで，ライフサイクルの図にある通りの動作が確認できました．

じゃあ，createdは何ができる？

結論：リアクティブdataおよびeventsにアクセスできる．

new Vue({
	el: '#app',
	data: {
		message : 'Hello World'
	},
	created : function() {
	this.message = 'Hello Vue.js'
	console.log('created')
  console.log(this)
	},
});

結果をコンソールで確認

createdではVueインスタンスの作成を行い，dataがリアクティブになっている（更新されている）ことも確認できる．

まとめ

createdはDOM要素へアクセスは不可(getElementById()とか),Vueインスタンスは生成され，dataオブジェクトがリアクティブな状態になっている（dataへのアクセス，操作は可能）．
mountedはDOM要素へアクセス可，Vueインスタンスも作成済，dataオブジェクトはリアクティブ（基本的に何にでもアクセスできる状態）．

ライフサイクルフックは他にも

• beforeCreate
• beforeMount
• beforeUpdate
• updated
• beforeDestroy
• destroyed
  こんなにたくさんのフック関数があるんですね…

これらのフック関数にも積極的に触っていきたいと思います．

間違ってたらコメントで教えていただけると幸いです!