1. 生命周期函數(shù)
vue 的生命周期大概可以分為8個(gè)階段, 創(chuàng)建前/后痊乾，載入前/后篷就，更新前/后劣像，銷毀前/后;
activated 和 deactivated 是在使用 keep-alive 時(shí)獨(dú)有的
- beforeCreate: data和el均未初始化要尔，值為undefined
- created: Vue 實(shí)例觀察的數(shù)據(jù)對(duì)象data已經(jīng)配置好势似，已經(jīng)可以得到data的值且data已經(jīng)具有響應(yīng)式，但Vue 實(shí)例使用的根 DOM 元素el還未初始化
- beforeMount: 在模板編譯之后,渲染之前觸發(fā);data和el均已經(jīng)初始化推穷，但此時(shí)el并沒有渲染進(jìn)數(shù)據(jù)心包，el的值為“虛擬”的元素節(jié)點(diǎn)
- mounted: 此時(shí)el已經(jīng)渲染完成并掛載到實(shí)例上;
- beforeUpdate: 數(shù)據(jù)更新時(shí)調(diào)用,發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前;可以在該生命周期中進(jìn)一步的更改狀態(tài),不會(huì)觸發(fā)附加的重渲染過程;
- updated: 在數(shù)據(jù)改變后,模板改變后觸發(fā); 數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁,在這之后調(diào)用該生命周期函數(shù); 調(diào)用該生命周期函數(shù)時(shí),組件DOM已經(jīng)更新,可以執(zhí)行依賴DOM的操作;
- activated: 使用 keep-alive 時(shí)調(diào)用
- deactivated: 使用 keep-alive 時(shí)調(diào)用
- beforeDestroy: 組件卸載前觸發(fā),可以在此時(shí)清理事件,計(jì)時(shí)器或者取消訂閱操作;
- destoryed: 實(shí)例銷毀之后調(diào)用; 調(diào)用后, vue實(shí)例指示的所有東西都會(huì)解除綁定,所有的事件監(jiān)聽器會(huì)被一處,所有的子實(shí)例也會(huì)被銷毀;
2. 父子組件初始化時(shí) 生命周期的執(zhí)行順序
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted->父mounted
3. 父子組件數(shù)據(jù)更新時(shí) 生命周期的執(zhí)行順序
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
4. 父子組件銷毀時(shí) 生命周期的執(zhí)行順序
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
5. 常見問題
case1: 當(dāng)子組件渲染的數(shù)據(jù) 是從父組件中調(diào)用接口獲得數(shù)據(jù),然后通過父子組件傳值的方式傳遞到子組件渲染頁面 頁面渲染可能會(huì)出現(xiàn)問題;
分析: 接口調(diào)用為異步請(qǐng)求, 可能會(huì)出現(xiàn)子組件已經(jīng)展示,但接口數(shù)據(jù)未返回的情況,造成頁面展示異常;
解決方式:
方案一: 在子組件展示的時(shí)候加上判斷條件 v-if = '接口返回?cái)?shù)據(jù)'; 即有數(shù)據(jù)的時(shí)候,展示子組件; 這樣就會(huì)形成天然的阻塞; 在父組件的生命周期函數(shù)中created/ mounted中的請(qǐng)求返回?cái)?shù)據(jù)后,才會(huì)執(zhí)行子組件的created, mounted;最后執(zhí)行父組件的mounted;
方案二: 在子組件中添加watch監(jiān)聽, 父組件獲取到值得時(shí)候, 就會(huì)觸發(fā)watch監(jiān)聽, 從而實(shí)現(xiàn)重新渲染子組件
- 方案一 代碼示例
<div class="fa-con">
<children v-if="resData" :resData="resData" ></children>
</div>
- 方案二 代碼示例
watch:{
data:{
deep:true,
handler() {
this.$nextTick(() => {
this.data = resData
})
}
},
}
