Vueのライフサイクルを完全に理解した

Vueのライフサイクルについて

今回はVueのライフサイクルについて説明したいと思います。
Vueのライフサイクルは以下のようになっております
https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム

このようにVueではインスタンスが作られてから、削除されるまでの間で、ライフサイクルフックを実行することができます。
ここでは、インスタンスのライフサイクルごとに説明したいと思います。

インスタンス作成時

インスタンス作成時には以下の2つのフックを実行されます

beforeCreate

beforeCreate.vue

<script>
export default {
  data(){
    return{
      hoge:"a"
    }
  },
  beforeCreate () {
    console.log('hoge is: ' + this.hoge)
  }
}
</script>
// ->何も表示されない

これはインスタンスの生成前に実行できます
このタイミングでは、インスタンスは初期化前ですので、data()は呼ばれていません

created

created.vue

<script>
export default {
  data() {
    return{
      hoge:"a"
    }
  },
  created() {
    console.log('hoge is: ' + this.hoge)
  }
}
</script>
// ->hoge is: a

これはインスタンスが作成された後で実行されます
個人的にはcreatedは一番使っている印象です！！
注意として、elementプロパティはまだここでは呼ばれていません

マウント時

インスタンスが作成された後は、elementへのマウントがされます

beforeMount

これは、インスタンスが作成された後、elementへのマウントされる前で実行されます

beforeMount.vue

<template>
  <div>現在{{hoge}}です</div>
</template>
<script>
export default {
  data() {
    return{
      hoge:""
    }
  },
  beforeMount() {
    this.hoge = "beforeMount"
  }
}
</script>
// ->表示されません

mounted

これは、elementへのマウントがされた後に実行されます
よく、createdとの違いがわからないと言う意見が見られますが、
mountedは、elementへのマウントが行われた後処理されます。
したがって、elでelementを指定している場合、createdではタイミングとして早いと言うことになります。
また、mountedはSSRの場合は使えないので注意が必要です

mounted.vue

<template>
  <div>現在{{hoge}}です</div>
</template>
<script>
export default {
  data() {
    return{
      hoge: ""
    }
  },
  beforeMount() {
    this.hoge = "mounted"
  }
}
</script>
// ->現在mountedです

mountedでは子コンポーネント全てをマウントしたことは保証しません。
したがって全てのコンポーネントがマウントされるまでロードを待つには以下のようにする必要があります

mounted.vue

<script>
....
mounted() {
  this.$nextTick(function () {
    // ビュー全体がレンダリングされた後にのみ実行されるコード
  })
}
....
</script>

データの更新時

データの更新時にはrerenderされるため、この前後でフックを実行することができます。

beforeUpdate

データの更新があった時に、rerenderされる前に実行されます。
更新前の既存のDOMに対してアクセスすることができます。
また、beforeUpdateはSSRの場合は使えないので注意が必要です

updated

データの更新があった時に、rerenderされた後に実行されます
このフックでは、状態変化を行うような処理は推奨されていません。
なぜならばそれが原因で無限ループに入ってしまう可能性があるからです。
updatedもmounted同様、子コンポーネントを全て再描画することを保証はしていないので、
mounted同様$nextTickを使うことを推奨されています。
また、updatedはSSRの場合は使えないので注意が必要です

インスタンスの削除時

インスタンスの削除**$destroy()**が呼ばれた時にこの前後でフックを実行することができます。

beforeDestroy

$destroy()が呼ばれた後、インスタンスが削除される前に実行されます
また、beforeDestroyはSSRの場合は使えないので注意が必要です

destoryed

**$destroy()**が呼ばれた後、インスタンスが削除された後に実行されます
また、destoryedはSSRの場合は使えないので注意が必要です

エラー時

errorCaptured

このフックはversion2.5.0以降で使用することができます
このフックは、任意の子孫コンポーネントからのエラーが捕捉された時に、呼び出されます。
フックは、エラー、エラーをトリガーするコンポーネントのインスタンス、エラーが捕捉されたかどうかのメッセージを受け取ることができます。
また、エラー伝播を防ぐ為に、falseにすることで任意の箇所以降に広まらないようにすることも可能です

最後に

これらのタイミングを理解することで「なんで期待通りに動かないの！」と言うようなことが減っていくと思います！！
これであなたもVueのライフサイクルを完全に理解しましたね笑