Vue 的生命周期
生命周期執(zhí)行的函數(shù)叫法有三種:
生命周期鉤子
生命周期函數(shù)
鉤子函數(shù)
生命周期鉤子概念:
在vue實例的生命周期的各個過程中 提供函數(shù)寫邏輯代碼 vue實例內(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)聽雁刷，計算屬性 (此時Vue實例中的配置全部生效)
↓
5. 執(zhí)行created 生命周期鉤子函數(shù)
(請求后臺數(shù)據(jù),ajax請求之類的捆昏，在這個函數(shù)執(zhí)行之后抵乓，就可以添加數(shù)據(jù)的監(jiān)聽)
↓
6. 判斷是否有el配置項，如果沒有韭赘，等待$mount()執(zhí)行揍愁。如果不執(zhí)行就終止生命周期(但之前的鉤子還是有效的)
// 也可以 進行動態(tài)掛載
// vm.$mount('#app'); //等價于el配置項
↓
7. 渲染 template 模版
↓
8. 查找有沒有對應(yīng)的dom結(jié)構(gòu)
↓
9. 有對應(yīng)的dom結(jié)構(gòu)，讀取出來內(nèi)部的dom冯挎，進行渲染 (意思就是說內(nèi)部渲染出虛擬 dom結(jié)構(gòu))
↓
10. 執(zhí)行beforeMount生命周期鉤子函數(shù) (掛載數(shù)據(jù)和渲染出真實 dom之前調(diào)用的函數(shù))
↓
11. 內(nèi)部渲染完成虛擬dom底哥，并插入屬性對應(yīng)的數(shù)據(jù) ,替換到el作用的真實dom中
↓
12.執(zhí)行mounted生命周期鉤子函數(shù)
(此時可以操作dom結(jié)構(gòu)了，因為真實dom已經(jīng)被渲染完成房官，不建議使用document操作趾徽。應(yīng)該使用$refs操作dom)
更新的過程(由于數(shù)據(jù)已經(jīng)發(fā)生了變化，需要重新渲染dom結(jié)構(gòu)翰守。更新是虛擬dom結(jié)構(gòu)的更新):
12. 當數(shù)據(jù)（data）發(fā)生變化后
↓
13. 執(zhí)行beforeUpdate生命周期鉤子函數(shù)（數(shù)據(jù)已經(jīng)變化了孵奶，虛擬dom沒有更新）
↓
14. 將數(shù)據(jù)更新渲染到dom中去 (虛擬dom的重新渲染改變數(shù)據(jù) , 然后轉(zhuǎn)變?yōu)?真實dom )
↓
15. 執(zhí)行updated生命周期鉤子函數(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實例的事件監(jiān)聽蜡峰，子組件的事件監(jiān)聽了袁。
↓
18. 執(zhí)行destroyed生命周期鉤子函數(shù)
最后總結(jié)一下注意的點：
- 當全部數(shù)據(jù)變化時
事件執(zhí)行的順序：watch -> beforeUpdate -> updated -> $nextTick()
此時要進行 dom的操作時：
只能在 updated / $nextTick() 函數(shù)中進行操作
因為watch / beforeUpdate 時，真實的dom還未進行渲染出來
- 當某個數(shù)據(jù)變化時湿颅，執(zhí)行dom操作
methods: {
changedata(){
this.data = 'xxxxx';
// 得到變化后的結(jié)果
/*
$nextTick()需要提供一個回調(diào)函數(shù)作為參數(shù)
當指定數(shù)據(jù)（data）發(fā)生變化后载绿，dom結(jié)構(gòu)執(zhí)行更新后
回調(diào)函數(shù)再執(zhí)行。
必須寫在數(shù)據(jù)變化后的第一行代碼油航。中間除注釋外不能有任何的代碼
*/
this.$nextTick(()=>{
console.log('nextTick調(diào)用了');
})
}
},
