Vue 的生命周期
生命周期執(zhí)行的函數(shù)叫法有三種:
生命周期鉤子
生命周期函數(shù)
鉤子函數(shù)
生命周期鉤子概念:
在vue實(shí)例的生命周期的各個(gè)過程中 提供函數(shù)寫邏輯代碼 vue實(shí)例內(nèi)部會在各對應(yīng)的過程調(diào)起該函數(shù)
生命周期鉤子執(zhí)行順序：
創(chuàng)建到掛載的過程：
1. new Vue();
↓
2. 讀取所有的生命周期鉤子（沒有調(diào)用）
↓
3. 執(zhí)行beforeCreate生命周期鉤子函數(shù)。（數(shù)據(jù)觀測,事件,監(jiān)聽,都還不起作用）
↓
4. 讀取所有的屬性和方法，監(jiān)聽，計(jì)算屬性 (此時(shí)Vue實(shí)例中的配置全部生效)
↓
5. 執(zhí)行created 生命周期鉤子函數(shù)
(請求后臺數(shù)據(jù),ajax請求之類的，在這個(gè)函數(shù)執(zhí)行之后，就可以添加數(shù)據(jù)的監(jiān)聽)
↓
6. 判斷是否有el配置項(xiàng)，如果沒有，等待$mount()執(zhí)行。如果不執(zhí)行就終止生命周期(但之前的鉤子還是有效的)
// 也可以 進(jìn)行動態(tài)掛載
// vm.$mount('#app'); //等價(jià)于el配置項(xiàng)
↓
7. 渲染 template 模版
↓
8. 查找有沒有對應(yīng)的dom結(jié)構(gòu)
↓
9. 有對應(yīng)的dom結(jié)構(gòu)，讀取出來內(nèi)部的dom，進(jìn)行渲染 (意思就是說內(nèi)部渲染出虛擬 dom結(jié)構(gòu))
↓
10. 執(zhí)行beforeMount生命周期鉤子函數(shù) (掛載數(shù)據(jù)和渲染出真實(shí) dom之前調(diào)用的函數(shù))
↓
11. 內(nèi)部渲染完成虛擬dom，并插入屬性對應(yīng)的數(shù)據(jù) ,替換到el作用的真實(shí)dom中
↓
12.執(zhí)行mounted生命周期鉤子函數(shù)
(此時(shí)可以操作dom結(jié)構(gòu)了，因?yàn)檎鎸?shí)dom已經(jīng)被渲染完成，不建議使用document操作。應(yīng)該使用$refs操作dom)
更新的過程(由于數(shù)據(jù)已經(jīng)發(fā)生了變化，需要重新渲染dom結(jié)構(gòu)。更新是虛擬dom結(jié)構(gòu)的更新):
12. 當(dāng)數(shù)據(jù)（data）發(fā)生變化后
↓
13. 執(zhí)行beforeUpdate生命周期鉤子函數(shù)（數(shù)據(jù)已經(jīng)變化了，虛擬dom沒有更新）
↓
14. 將數(shù)據(jù)更新渲染到dom中去 (虛擬dom的重新渲染改變數(shù)據(jù) , 然后轉(zhuǎn)變?yōu)?真實(shí)dom )
↓
15. 執(zhí)行updated生命周期鉤子函數(shù) (此時(shí)真實(shí)dom已經(jīng)完全修改，之后可以調(diào)用$nextTick())
銷毀的過程:
動態(tài)銷毀 vm.$destroy() / 內(nèi)部配置中調(diào)用this.$destroy()
↓
16. 執(zhí)行beforeDestroy生命周期鉤子函數(shù) -- 將要移除事件監(jiān)聽(所有watch)
↓
17. 移除vue實(shí)例的事件監(jiān)聽，子組件的事件監(jiān)聽。
↓
18. 執(zhí)行destroyed生命周期鉤子函數(shù)
最后總結(jié)一下注意的點(diǎn)：
- 當(dāng)全部數(shù)據(jù)變化時(shí)
事件執(zhí)行的順序：watch -> beforeUpdate -> updated -> $nextTick()
此時(shí)要進(jìn)行 dom的操作時(shí)：
只能在 updated / $nextTick() 函數(shù)中進(jìn)行操作
因?yàn)閣atch / beforeUpdate 時(shí)，真實(shí)的dom還未進(jìn)行渲染出來
- 當(dāng)某個(gè)數(shù)據(jù)變化時(shí)，執(zhí)行dom操作
methods: {
changedata(){
this.data = 'xxxxx';
// 得到變化后的結(jié)果
/*
$nextTick()需要提供一個(gè)回調(diào)函數(shù)作為參數(shù)
當(dāng)指定數(shù)據(jù)（data）發(fā)生變化后，dom結(jié)構(gòu)執(zhí)行更新后
回調(diào)函數(shù)再執(zhí)行。
必須寫在數(shù)據(jù)變化后的第一行代碼。中間除注釋外不能有任何的代碼
*/
this.$nextTick(()=>{
console.log('nextTick調(diào)用了');
})
}
},
