Vue 3のライフサイクルとVue 2の比較

Vue 3 のライフサイクル

1. setup():

   • コンポーネントの作成を開始し、beforeCreate と created の前に実行され、data と method を作成します。

2. onBeforeMount():

   • コンポーネントがノードにマウントされる前に実行される関数です。

3. onMounted():

   • コンポーネントがマウントされた後に実行される関数です。

4. onBeforeUpdate():

   • コンポーネントが更新される前に実行される関数です。

5. onUpdated():

   • コンポーネントが更新された後に実行される関数です。

6. onBeforeUnmount():

   • コンポーネントがアンマウントされる前に実行される関数です。

7. onUnmounted():

   • コンポーネントがアンマウントされた後に実行される関数です。

8. onActivated():

   • <keep-alive> に含まれるコンポーネントには、2つのライフサイクルフックが追加され、アクティブ化されたときに実行されます。

9. onDeactivated():

   • A コンポーネントから B コンポーネントに切り替えた場合、A コンポーネントが消えるときに実行されます。

10. onErrorCaptured():

    • 子孫コンポーネントからの例外をキャッチしたときにアクティブ化されるフック関数です。

---

Vue 2.x と Vue 3.x の比較

Vue 2	Vue 3
beforeCreate	setup(() => {})
created	setup(() => {})
beforeMount	onBeforeMount(() => {})
mounted	onMounted(() => {})
beforeUpdate	onBeforeUpdate(() => {})
updated	onUpdated(() => {})
beforeDestroy	onBeforeUnmount(() => {})
destroyed	onUnmounted(() => {})
activated	onActivated(() => {})
deactivated	onDeactivated(() => {})
errorCaptured	onErrorCaptured(() => {})

---

まとめ

Vue 2 と Vue 3 のフックの変更はあまり大きくなく、beforeCreate と created の2つのフックが setup() フックに置き換えられています。