[Vue.js] ライフサイクルフック

Vue.jsにはライフサイクルという仕組みがあります。SPAでは動的なサイト構成になるので、どのようなタイミングで処理を行うかという指定が重要になってきます。

ライフサイクルフック一覧

ライフサイクルフックの表です。
プロパティ、DOMがどの時点で利用できるかを覚えておくことが重要になります。

[table id=63 /]

公式ページにはフロー図が掲載されています。ライフサイクルを視覚的に理解できて良いです。
lifecycle(Vue.js公式ページより引用)
Vue.js公式ページ ライフサイクルダイアグラム

mounted

mountedはDOMの操作を行うことができます。
Vueインスタンスは下記のようになります。

ひとつ注意点があって、この状態では子コンポーネントがマウントされていることが保証されていません。親と子のコンポーネントがあるときに、親はDOMが使えて、子はDOMが使えていないというような状態になることがあります。$nextTickを使うと子コンポーネントがレンダリングされてから処理を実行することができます。

Author: webmaster