Vue3生命週期 及和vue2的對比

一、Vue3中的生命週期
1、setup() : 開始建立元件，在 beforeCreate 和 created 之前執行，建立的是 data 和 method

2、onBeforeMount() : 元件掛載到節點上之前執行的函式；

3、onMounted() : 元件掛載完成後執行的函式；

4、onBeforeUpdate(): 元件更新之前執行的函式；

5、onUpdated(): 元件更新完成之後執行的函式；

6、onBeforeUnmount(): 元件解除安裝之前執行的函式；

7、onUnmounted(): 元件解除安裝完成後執行的函式；

8、onActivated(): 被包含在 中的元件，會多出兩個生命週期鉤子函式，被啟用時執行；

9、onDeactivated(): 比如從 A 元件，切換到 B 元件，A 元件消失時執行；

10、onErrorCaptured(): 當捕獲一個來自子孫元件的異常時啟用鉤子函式。

二、Vue2.X和Vue3.X對比
vue2 -------> vue3

beforeCreate --------> setup(()=>{})
created --------> setup(()=>{})
beforeMount --------> onBeforeMount(()=>{})
mounted --------> onMounted(()=>{})
beforeUpdate --------> onBeforeUpdate(()=>{})
updated --------> onUpdated(()=>{})
beforeDestroy --------> onBeforeUnmount(()=>{})
destroyed --------> onUnmounted(()=>{})
activated --------> onActivated(()=>{})
deactivated --------> onDeactivated(()=>{})
errorCaptured --------> onErrorCaptured(()=>{})
總結： Vue2和Vue3鉤子變化不大，beforeCreate 、created 兩個鉤子被setup()鉤子來替代。

原文連結：https://blog.csdn.net/m0_57341617/article/details/126426931