Posted in vuejs

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

   Published Date: 2020年5月1日

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

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

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

[table id=63 /]

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

mounted

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

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'sample'
    }
  },
  mounted() {
    // マウント後の処理を記載（DOM操作など）
  }
});
</script>

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

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'sample'
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 親と子のコンポーネントが全部読み込まれた後の処理を記載
    });
  }
});
</script>


Author: webmaster