- Published on
Vue.js Created vs Mounted の違いを解説
Vue.jsのCreatedとMounted。どっちを使うのが適切かなど悩むことが多いと思います。 そこで、Vueのライフサイクルでの観点から違いを説明し、 適切な利用シーンを見ることで、大きな違いを解説したいと思います。
結論としては、createdではvirtualDOMにアクセス・変更できないのに対してmountedはすでにvirtualDOMがdataと一緒に描画された後なので、アクセス・変更することが可能になっています。
これだけでは分からないと思うので、ライフサイクルから、どのような違いがなぜ生まれているのか解説します。
Vue.jsのライフサイクルから見るcreatedとmountedの違い
違いを知るには全体のライフサイクルを理解する必要があります。 全体のライフサイクルは図の通りでVue.jsはデータを取得して、virtualDOMをレンダー（描画）し、dataが変わると、それを検知してvirutalDOMを再度レンダー（描画）するというライフサイクルになっています。
ライフサイクルの図を見ると、createdが先に呼ばれ、mountedが後に呼ばれています。
createdが呼ばれた後のbeforeMountで、VirtualDOMのテンプレートがコンパイルされ$elに入ります。
そして、mountでdataに紐づくものを描画(render)するというライフサイクルになり、
その後にmountedが呼ばれます。
これでもう差分はわかったと思います。createdはvirtualDOMが作成される前に呼ばれて、
mountedはvirtualDOMが作成されてdataが描画された後に呼ばれます。
そのため、createdではVirtualDOMにアクセス、変更できないのに対してmountedはすでにVirtualDOMがdataと一緒に描画された後なので、操作、アクセスすることが可能になっています。
createdの適切な利用シーン
virtualDOMが描画される前に動作するので、
APIなどでデータを取ってきてdataに格納する時などに利用します。
（データの初期化に使います。）
mountedの適切な利用シーン
mountedはvirutalDOMが描画された後に動作します。
ここでも同じようにAPIなどでデータを取ってきて,dataに格納するのにももちろん使えます。
データの初期化の文脈であれば、それはcreatedの方が適していると言えるでしょう。
さらに、mountedはdataをもとにvirtualDOMが描画された後なので、
virtualDOMの要素へのアクセス・変更が可能です。
そのため、描画後にDOM要素へ何かしたい時などはmountedを使います。
参考: difference-between-the-created-and-mounted-events-in-vue-js