Vue生命周期實例分析總結
1. 概述
每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，給予用戶機會在一些特定的場景下添加他們自己的代碼。
簡單來說，生命周期鉤子函數就是一堆回調函數，在我們創建實例時，這些回調函數按順序執行。
2. 頁面鉤子函數
| 名稱 | 作用 |
|---|---|
| beforeCreate | 在實例初始化之後，數據觀測和事件配置之前被調用。此時 data 和 methods 以及頁面的DOM結構都沒有初始化，什麼都做不瞭，執行1次 |
| created | 在實例創建完成後被立即調用，此時data 和 methods 已經可以使用，但是頁面還沒有渲染出來，執行1次，用this對象 |
| beforeMount | 在掛載開始之前被調用，此時頁面上還看不到真實數據，隻是一個模板頁面而已，執行1次 |
| mounted | el被新創建的vm.$el替換，並掛載到實例上去之後調用該鉤子。 數據已經真實渲染到頁面上 在這個鉤子函數裡面，可以進行數據請求等，執行1次 |
| beforeUpdate | 數據更新時調用，頁面上數據還是舊的 n次 |
| updated | 由於數據更新完畢，頁面上數據已經替換成最新的 n次 |
| beforeDestroy | 實例銷毀之前調用，執行1次 |
| destroyed | 實例銷毀後調用，執行1次 |
| activated | keep-alive 組件激活時調用 |
| deactivated | keep-alive 組件停用時調用 |
| errorCaptured | 當捕獲一個來自子孫組件的錯誤時被調用 |
3. 生命周期函數
下面我們用代碼實現以下生命周期函數的執行順序：
<div id="app">
<input type="text" v-model="username">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: ''
},
// 初始化階段生命周期 -- 它隻都隻執行1次
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
setTimeout(() => {
// 銷毀
this.$destroy()
}, 2000);
this.timer = setInterval(() => {
console.log(111);
}, 1000);
},
// 更新階段生命周期，它們會執行N次
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
// 銷毀階段 隻執行1次
beforeDestroy() {
clearInterval(this.timer)
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
})
</script>
到此這篇關於Vue生命周期實例分析總結的文章就介紹到這瞭,更多相關Vue生命周期內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！