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