以下主要從幾個方面來講：
1.vue的生命周期是什么
2.vue生命周期的在項目中的執(zhí)行順序
3.vue中內(nèi)置的方法 屬性和vue生命周期的運行順序（methods星澳、computed钳宪、data、watch）
4.自己構(gòu)造的方法與vue生命周期的運行順序 如show這些
5.總結(jié)
一、vue的生命周期是什么
vue每個組件都是獨立的沽讹，每個組件都有一個屬于它的生命周期，從一個組件創(chuàng)建、數(shù)據(jù)初始化晃酒、掛載、更新窄绒、銷毀贝次，這就是一個組件所謂的生命周期。在組件中具體的方法有:
? ? beforeCreate
? ? created
? ? beforeMount
? ? mounted
? ? (
? ? ? ? beforeUpdate
? ? ? ? updated
? ? )
? ? beforeDestroy
? ? destroyed
? ? 對應(yīng)的中文就如其字面意思彰导，英文不好的童鞋可以有道翻翻
? ? 好了蛔翅，這里要上圖啦~~~
二、vue生命周期的在項目中的執(zhí)行順序
...
data () {
? ? return {
? ? rendered: false,
}
}
...
1.beforeCeate(){
? ? console.log(this.rendered);? ? // undefined?
}
2.created() {
? ? console.log(this.$el);//undefined
? ? console.log(this.rendered);? // false
}
3.beforeMount() {
? ? console.log(this.$el)位谋；//undefined
}
4.mounted() {
? ? console.log(this.$el);
}
5.beforeDestroty(){
? ? console.log(this.$el);
? ? console.log(this.rendered);
}
6.destroyed() {
? ? console.log(this.$el);
? ? console.log(this.rendered);
}
三山析、vue中內(nèi)置的方法 屬性和vue生命周期的運行順序（methods、computed掏父、data笋轨、watch、props)
? ? 從第一二點可知道data的初始化是在created時已經(jīng)完成數(shù)據(jù)觀測(data observer)，并且諸如methods翩腐、computed屬性 props等已經(jīng)初始化鸟款；那問題來了，
data props computed watch methods他們之間的生成順序是什么呢茂卦？
根據(jù)翻看vue源碼可知：
props => methods =>data => computed => watch; 懂了沒
四何什、自己構(gòu)造的方法與vue生命周期的運行順序 如show這些
? ? 往往我們在開發(fā)項目時都經(jīng)常用到 $refs 來直接訪問子組件的方法，但是這樣調(diào)用的時候可能會導(dǎo)致數(shù)據(jù)的延遲滯后的問題等龙，則會出現(xiàn)bug处渣。
解決方法則是推薦采取異步回調(diào)的方法，然后傳參進(jìn)去蛛砰，嚴(yán)格遵守vue的生命周期就可以解決 推薦 es6 的promise罐栈。
示例代碼：
handleAsync () {
? ? return new Promise(resolve=>{
? ? ? const res="";
? ? ? ? resolve(res)
})
}
...
async handleShow() {
? ? await this.handleAsync().then(res=>{
? ? this.$refs.child.show(res);
})
}
...
五、總結(jié)
vue 的生命周期泥畅，總得來說就是實例的創(chuàng)建和銷毀這段時間的一個機制吧荠诬。也是vue框架的數(shù)據(jù)間的交互通信。其實現(xiàn)在看來也沒那么難位仁，但是vue的源碼實現(xiàn)這一套機制那是難得一逼柑贞，涉及到復(fù)雜的算法如diff算法，有興趣的童鞋可以去深入了解一下聂抢。喜歡的童鞋點個贊 啊哈哈钧嘶，又來騙贊啦
作者：Kevin這條街最靚的仔
鏈接：http://www.reibang.com/p/410b6099be69
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處琳疏。
