此間少年_ ·1. 前言
在之前的小節(jié)中我們介紹了 Vue 實例，本小節(jié)我們一起來了解一下 Vue 實例的生命周期。包括生命周期的幾個階段，以及各個階段觸發(fā)時機和作用。深入理解 Vue 的生命周期是本小節(jié)的難點，同學們不僅需要知道生命周期的執(zhí)行順序，還要理解各生命周期的作用。
2. 慕課解釋
每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程 —— 例如，需要設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。 — 官方定義
Vue 生命周期是指 Vue 實例對象從創(chuàng)建之初到銷毀的整個過程。在生命周期的不同階段 Vue 提供了不同的鉤子函數(shù)，讓用戶可以在不同的階段執(zhí)行自己的代碼。
3. 生命周期流程
我們來看一下官網(wǎng)給的 Vue 生命周期的圖：
從上面這幅圖中，我們可以看到 vue 生命周期可以分為八個階段，分別是：
- beforeCreate（創(chuàng)建前）
- created（創(chuàng)建后）
- beforeMount (載入前)
- mounted（載入后）
- beforeUpdate（更新前）
- updated（更新后）
- beforeDestroy（銷毀前）
- destroyed（銷毀后）
3.1 創(chuàng)建前（beforeCreate）
在實例初始化之后，此時的數(shù)據(jù)觀察和事件機制都未形成，不能獲得 DOM 節(jié)點。
3.2 創(chuàng)建后（created）
實例已經(jīng)創(chuàng)建完成之后被調用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測（data observer），屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始。
3.3 載入前（beforeMount）
在掛載開始之前被調用：這個過程是在模版已經(jīng)在內存中編譯完成， render 函數(shù)首次被調用，此時完成了虛擬 DOM 的構建，但并未被渲染。
3.4 載入后（mounted）
這個過程在模版掛載之后被調用，頁面完成渲染，所以在這之后，我們可以操作和訪問 DOM 元素。
3.5 更新前（beforeUpdate）
當數(shù)據(jù)更新時調用，在這一階段 DOM 會和更改過的內容同步。
3.6 更新后（updated）
由于數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應該避免在此期間更改狀態(tài)，因為這可能會導致更新無限循環(huán)。
3.7 銷毀前（beforeDestroy）
實例銷毀之前調用。在這一步，實例仍然完全可用。
3.8 銷毀后（destroyed）
Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
{{ name }}
<button @click="updateName">更新</button>
<button @click="destroy">銷毀</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
name:'hello !'
},
methods : {
updateName() {
console.log('準備修改名字啦！')
this.name = 'hello 慕課！'
},
destroy(){
vm.$destroy()
}
},
beforeCreate() {
// 此時頁面數(shù)據(jù)未初始化
console.log('beforeCreate:' + this.name) // beforeCreate： undefined
},
created() {
// 頁面數(shù)據(jù)已經(jīng)初始化
console.log('created:' + this.name) // beforeCreate： hello !
},
beforeMount() {
console.log('beforeMount:' + this.name) // beforeCreate： hello !
},
mounted() {
console.log('mounted:' + this.name) // beforeCreate： hello !
},
// 點擊更新按鈕后會先觸發(fā) beforeUpdate
beforeUpdate() {
console.log('beforeUpdate:' + this.name) // beforeCreate： hello 慕課！
},
updated() {
console.log('updated:' + this.name) // updated hello 慕課 !
},
// 點擊銷毀按鈕后會先觸發(fā) beforeDestroy
beforeDestroy(){
console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
},
destroyed(){
console.log('destroyed: success') // destroyed: success
// 在這之后點擊頁面 更新 按鈕將無任何效果
}
});
</script>
</html>
4. 小結
本小節(jié)我們介紹了 Vue 的生命周期，了解了 Vue 從創(chuàng)建到銷毀的一個過程。
2025 imooc.com All Rights Reserved |