Published on

Vue.js Created vs Mounted の違いを解説

Authors
  • avatar
    Name
    ssu
    Twitter

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に入ります。 そして、mountdataに紐づくものを描画(render)するというライフサイクルになり、 その後にmountedが呼ばれます。

これでもう差分はわかったと思います。createdはvirtualDOMが作成される前に呼ばれて、 mountedはvirtualDOMが作成されてdataが描画された後に呼ばれます。

そのため、createdではVirtualDOMにアクセス、変更できないのに対してmountedはすでにVirtualDOMがdataと一緒に描画された後なので、操作、アクセスすることが可能になっています。

Vue.js life cycle

createdの適切な利用シーン

virtualDOMが描画される前に動作するので、 APIなどでデータを取ってきてdataに格納する時などに利用します。 (データの初期化に使います。)

mountedの適切な利用シーン

mountedはvirutalDOMが描画された後に動作します。 ここでも同じようにAPIなどでデータを取ってきて,dataに格納するのにももちろん使えます。 データの初期化の文脈であれば、それはcreatedの方が適していると言えるでしょう。

さらに、mounteddataをもとにvirtualDOMが描画された後なので、 virtualDOMの要素へのアクセス・変更が可能です。 そのため、描画後にDOM要素へ何かしたい時などはmountedを使います。

参考: Vue.js mouted

参考: difference-between-the-created-and-mounted-events-in-vue-js