溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“Vue生命周期實例代碼分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue生命周期實例代碼分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，給予用戶機會在一些特定的場景下添加他們自己的代碼。
簡單來說，生命周期鉤子函數就是一堆回調函數，在我們創建實例時，這些回調函數按順序執行。
| 名稱 | 作用 |
|---|---|
| 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 | 當捕獲一個來自子孫組件的錯誤時被調用 |
下面我們用代碼實現以下生命周期函數的執行順序：
<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生命周期實例代碼分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
