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