MENU
- 前言
- vue2
- vue3
- activated和deactivated
前言
在Vue.js中,組件生命周期鉤子函數定義了在組件的不同階段執行的操作。Vue 2.x和Vue 3.x之間的生命周期鉤子函數有一些區別。
vue2
1、beforeCreate: 在實例初始化之后,數據觀測(data observer)和event/watcher事件配置之前被調用。
2、created: 實例已經創建完成后調用,此階段完成了數據觀測(data observer)和event/watcher事件的配置。
3、beforeMount: 在掛載開始之前被調用:相關的render函數首次被調用。
4、mounted: el 被新創建的vm.$el替換,并掛載到實例上去之后調用該鉤子函數。
5、beforeUpdate: 數據更新時調用,發生在虛擬DOM重新渲染和打補丁之前。
6、updated: 由于數據更改導致的虛擬DOM重新渲染和打補丁后調用。
7、beforeDestroy: 在實例銷毀之前調用。實例仍然完全可用。
8、destroyed: 在實例銷毀之后調用。調用后,所有的事件監聽器和所有的子實例被銷毀。
vue3
01、beforeCreate: 在實例初始化之后,數據觀測(data observer)和event/watcher事件配置之前被調用。
02、created: 實例已經創建完成后調用,此階段完成了數據觀測(data observer)和event/watcher事件的配置。
03、beforeMount: 在掛載開始之前被調用:相關的render函數首次被調用。
04、onBeforeMount: 在掛載之前調用。
05、mounted: 在掛載完成之后調用,此時已經完成了頁面中的真實DOM渲染。
06、onMounted: 在掛載完成之后調用,與mounted類似。
07、beforeUpdate: 在數據變化更新DOM之前被調用。
08、onBeforeUpdate: 在更新之前調用。
09、updated: 在數據變化更新DOM之后被調用。
10、onUpdated: 在更新之后調用。
11、beforeUnmount: 在卸載組件之前調用。
12、onBeforeUnmount: 在卸載之前調用,與beforeUnmount類似。
13、unmounted: 在卸載組件之后調用。
14、onUnmounted: 在卸載之后調用,與unmounted類似。
Vue 3.x引入了一些新的生命周期鉤子函數,如onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted。這些新的生命周期鉤子函數提供了更精細的控制和更明確的生命周期階段。
activated和deactivated
在Vue.js 2.x中針對的是keep-alive包裹的組件。activated在組件被keep-alive緩存激活時調用,而deactivated在組件被緩存停用時調用。這對于在組件被切換時執行一些特定的操作非常有用,例如,數據的初始化和清理、動畫效果的觸發等。在Vue.js 3.x中,這兩個生命周期鉤子函數仍然存在,并且在組件被keep-alive緩存時也會被調用,但也可在普通組件中使用,用于控制組件的激活和停用狀態。