ue 的生命周期是 Vue 實(shí)例從創(chuàng)建到銷毀的過程,涉及多個(gè)生命周期鉤子函數(shù)。每個(gè)鉤子函數(shù)在不同的階段會被自動調(diào)用,允許開發(fā)者在特定的時(shí)機(jī)執(zhí)行一些操作。Vue 生命周期可以分為以下幾個(gè)主要階段:
1. 創(chuàng)建階段
這個(gè)階段 Vue 實(shí)例剛剛被創(chuàng)建,數(shù)據(jù)初始化、事件監(jiān)聽、生命周期鉤子函數(shù)等都還沒有被執(zhí)行。
beforeCreate: 實(shí)例剛創(chuàng)建后,數(shù)據(jù)、事件等都還沒有初始化,無法訪問 data 和 computed。
created: 實(shí)例已經(jīng)創(chuàng)建完成,數(shù)據(jù)、事件、計(jì)算屬性等已初始化,DOM 還未掛載,可以進(jìn)行一些初始化操作,但還不能訪問或操作 DOM。
2. 掛載階段
在這個(gè)階段,Vue 會將模板編譯生成的虛擬 DOM 渲染成真實(shí)的 DOM,并掛載到頁面上。
beforeMount: 在掛載開始之前被調(diào)用,相關(guān)的模板尚未渲染到真實(shí) DOM 上。
mounted: 在 Vue 實(shí)例掛載到真實(shí) DOM 后被調(diào)用。可以訪問到 DOM,并且可以進(jìn)行一些依賴 DOM 的操作(如請求數(shù)據(jù)、添加事件監(jiān)聽等)。
3. 更新階段
當(dāng)數(shù)據(jù)發(fā)生變化時(shí),組件會重新渲染,進(jìn)入更新階段。更新階段由數(shù)據(jù)變化引發(fā)。
beforeUpdate: 在數(shù)據(jù)更新之前調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子里訪問到更新前的數(shù)據(jù)。
updated: 數(shù)據(jù)更新并且虛擬 DOM 已經(jīng)重新渲染并打補(bǔ)丁后被調(diào)用。此時(shí) DOM 已經(jīng)更新,你可以執(zhí)行與更新后的 DOM 相關(guān)的操作。
4. 銷毀階段
當(dāng) Vue 實(shí)例被銷毀時(shí),銷毀階段的生命周期鉤子函數(shù)會被調(diào)用。在這個(gè)階段,組件的所有相關(guān)事件監(jiān)聽器、子組件等會被清理。
beforeDestroy: 實(shí)例銷毀之前調(diào)用。在這個(gè)鉤子里,你可以進(jìn)行一些清理工作,如取消定時(shí)器、清除事件監(jiān)聽等。
destroyed: 實(shí)例銷毀后調(diào)用,此時(shí)所有的事件監(jiān)聽器、數(shù)據(jù)綁定等都已經(jīng)被清理。
完整的生命周期鉤子函數(shù)順序:
text
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
示例代碼:
javascript
new Vue({
data() {
return {
message: 'Hello, Vue!'
};
},
beforeCreate() {
console.log('beforeCreate: 實(shí)例剛剛創(chuàng)建,數(shù)據(jù)尚未初始化');
},
created() {
console.log('created: 實(shí)例已經(jīng)創(chuàng)建,數(shù)據(jù)已初始化');
},
beforeMount() {
console.log('beforeMount: 即將掛載到 DOM');
},
mounted() {
console.log('mounted: 已掛載到 DOM');
},
beforeUpdate() {
console.log('beforeUpdate: 數(shù)據(jù)變化,DOM 即將更新');
},
updated() {
console.log('updated: 數(shù)據(jù)變化,DOM 已更新');
},
beforeDestroy() {
console.log('beforeDestroy: 即將銷毀實(shí)例');
},
destroyed() {
console.log('destroyed: 實(shí)例已經(jīng)銷毀');
}
});
總結(jié)
Vue 的生命周期鉤子為開發(fā)者提供了很多靈活的操作時(shí)機(jī),允許你在不同的階段進(jìn)行不同的操作,比如數(shù)據(jù)初始化、DOM 操作、事件監(jiān)聽等。理解生命周期并合理使用生命周期鉤子函數(shù),有助于提高組件的性能和維護(hù)性。