Vue的生命周期是Vue實(shí)例從創(chuàng)建到銷毀的整個(gè)過(guò)程，可以分為四個(gè)主要階段，每個(gè)階段都有對(duì)應(yīng)的鉤子函數(shù)，讓我們可以在特定時(shí)刻執(zhí)行自定義邏輯。
四個(gè)主要階段
-
創(chuàng)建階段 (Creation) - 初始化數(shù)據(jù)和事件
-
掛載階段 (Mounting) - 將模板編譯并掛載到DOM
-
更新階段 (Updating) - 數(shù)據(jù)變化時(shí)重新渲染
-
銷毀階段 (Destruction) - 清理工作，移除事件監(jiān)聽(tīng)器等
8個(gè)主要鉤子函數(shù)
下面是完整的生命周期鉤子函數(shù)及其執(zhí)行時(shí)機(jī)：
export default {
data() {
return {
message: 'Hello Vue!'
}
},
// 1. 創(chuàng)建階段
beforeCreate() {
// 實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和事件配置之前
console.log('beforeCreate: 數(shù)據(jù)和事件尚未初始化')
},
created() {
// 實(shí)例創(chuàng)建完成，數(shù)據(jù)觀測(cè)已完成，但DOM尚未掛載
console.log('created: 數(shù)據(jù)已初始化，可以訪問(wèn)data和methods')
console.log(this.message) // 可以訪問(wèn)數(shù)據(jù)
},
// 2. 掛載階段
beforeMount() {
// 模板編譯完成，但尚未掛載到DOM
console.log('beforeMount: 模板已編譯，但未掛載到DOM')
},
mounted() {
// 實(shí)例已掛載到DOM，可以訪問(wèn)DOM元素
console.log('mounted: 實(shí)例已掛載到DOM')
console.log(this.$el) // 可以訪問(wèn)DOM元素
},
// 3. 更新階段
beforeUpdate() {
// 數(shù)據(jù)更新時(shí)調(diào)用，DOM尚未重新渲染
console.log('beforeUpdate: 數(shù)據(jù)已更新，DOM尚未重新渲染')
},
updated() {
// 數(shù)據(jù)更新導(dǎo)致DOM重新渲染后調(diào)用
console.log('updated: DOM已重新渲染')
},
// 4. 銷毀階段
beforeDestroy() {
// 實(shí)例銷毀之前調(diào)用，實(shí)例仍然完全可用
console.log('beforeDestroy: 實(shí)例即將銷毀，但仍可訪問(wèn)')
},
destroyed() {
// 實(shí)例銷毀后調(diào)用，所有事件監(jiān)聽(tīng)器和子實(shí)例已被移除
console.log('destroyed: 實(shí)例已完全銷毀')
}
}
生命周期鉤子函數(shù)詳解
1. 創(chuàng)建階段 (Creation)
-
beforeCreate: 在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和事件配置之前調(diào)用。此時(shí)無(wú)法訪問(wèn)到data、computed、methods等。
-
created: 實(shí)例創(chuàng)建完成，數(shù)據(jù)觀測(cè)和事件已初始化?？梢栽L問(wèn)data、computed、methods等，但DOM尚未掛載。
2. 掛載階段 (Mounting)
3. 更新階段 (Updating)
4. 銷毀階段 (Destruction)
這個(gè)可視化演示展示了Vue生命周期的完整過(guò)程，你可以通過(guò)點(diǎn)擊各個(gè)鉤子函數(shù)查看詳細(xì)信息，并通過(guò)操作按鈕觀察不同階段鉤子函數(shù)的觸發(fā)情況。