寫(xiě)這章博客不是為了要獲得多少贊约计，主要是利用vue開(kāi)發(fā)項(xiàng)目時(shí)踩的坑太多了沦偎。自己曾不理解或者遇到的問(wèn)題再這里搞清楚咐吼，不想后來(lái)的人再遇到這樣的坑吹缔，做技術(shù)的要懂得分享，做人嘛锯茄，最重要的是開(kāi)心厢塘。
vue官網(wǎng)說(shuō)茶没，“你暫時(shí)不用搞清楚這些...",我覺(jué)得你既然準(zhǔn)備用vue做開(kāi)發(fā)的，不搞懂搞透它晚碾，你以后會(huì)發(fā)現(xiàn)踩的坑終究還是有它引起的抓半，等以后再來(lái)補(bǔ)坑，不如現(xiàn)在就拿下它格嘁。
以下主要從幾個(gè)方面來(lái)講：
1.vue的生命周期是什么
2.vue生命周期的在項(xiàng)目中的執(zhí)行順序
3.vue中內(nèi)置的方法?屬性和vue生命周期的運(yùn)行順序（methods笛求、computed、data糕簿、watch）
4.自己構(gòu)造的方法與vue生命周期的運(yùn)行順序?如show這些
5.總結(jié)
一探入、vue的生命周期是什么
? ? vue每個(gè)組件都是獨(dú)立的，每個(gè)組件都有一個(gè)屬于它的生命周期懂诗，從一個(gè)組件創(chuàng)建蜂嗽、數(shù)據(jù)初始化、掛載殃恒、更新植旧、銷(xiāo)毀，這就是一個(gè)組件所謂的生命周期芋类。在組件中具體的方法有:
? ? beforeCreate
? ? created
? ? beforeMount
? ? mounted
? ? (
?? ?? ? beforeUpdate
?? ?? ? updated
?? ?)
? ? beforeDestroy
? ? destroyed
? ? 對(duì)應(yīng)的中文就如其字面意思隆嗅，英文不好的童鞋可以有道翻翻
? ? 好了，這里要上圖啦~~~
二侯繁、vue生命周期的在項(xiàng)目中的執(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.beforeDestroy(){
? ? console.log(this.$el);
? ? console.log(this.rendered);?
}
6.destroyed() {
? ? console.log(this.$el);
? ? console.log(this.rendered);
}
三、vue中內(nèi)置的方法?屬性和vue生命周期的運(yùn)行順序（methods贮竟、computed丽焊、data、watch咕别、props)
? ? 從第一二點(diǎn)可知道data的初始化是在created時(shí)已經(jīng)完成數(shù)據(jù)觀測(cè)(data observer)技健，并且諸如methods、computed屬性 props等已經(jīng)初始化惰拱；那問(wèn)題來(lái)了雌贱，
data props computed watch methods他們之間的生成順序是什么呢？
根據(jù)翻看vue源碼可知：
props => methods =>data => computed => watch;?懂了沒(méi)?
四偿短、自己構(gòu)造的方法與vue生命周期的運(yùn)行順序?如show這些
? ? 往往我們?cè)陂_(kāi)發(fā)項(xiàng)目時(shí)都經(jīng)常用到 $refs?來(lái)直接訪問(wèn)子組件的方法欣孤，但是這樣調(diào)用的時(shí)候可能會(huì)導(dǎo)致數(shù)據(jù)的延遲滯后的問(wèn)題，則會(huì)出現(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?的生命周期声旺，總得來(lái)說(shuō)就是實(shí)例的創(chuàng)建和銷(xiāo)毀這段時(shí)間的一個(gè)機(jī)制吧。也是vue框架的數(shù)據(jù)間的交互通信段只。其實(shí)現(xiàn)在看來(lái)也沒(méi)那么難腮猖，但是vue的源碼實(shí)現(xiàn)這一套機(jī)制那是難得一逼，涉及到復(fù)雜的算法如diff算法翼悴，有興趣的童鞋可以去深入了解一下缚够。喜歡的童鞋點(diǎn)個(gè)贊?啊哈哈，又來(lái)騙贊啦
