vue生命週期執行順序
vue官網說，“你暫時不用搞清楚這些...",我覺得你既然準備用vue做開發的，不搞懂搞透它，你以後會發現踩的坑終究還是有它引起的，等以後再來補坑，不如現在就拿下它。
以下主要從幾個方面來講：
1.vue的生命週期是什麼
2.vue生命週期的在專案中的執行順序
3.vue中內建的方法 屬性和vue生命週期的執行順序(methods、computed、data、watch)
4.自己構造的方法與vue生命週期的執行順序 如show這些
5.總結
一、vue的生命週期是什麼
vue每個元件都是獨立的，每個元件都有一個屬於它的生命週期，從一個元件建立、資料初始化、掛載、更新、銷燬，這就是一個元件所謂的生命週期。在元件中具體的方法有:
beforeCreate
created
beforeMount
mounted
(
beforeUpdate
updated
)
beforeDestroy
destroyed
對應的中文就如其字面意思，英文不好的童鞋可以有道翻翻
好了，這裡要上圖啦~~~
二、vue生命週期的在專案中的執行順序
...
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中內建的方法 屬性和vue生命週期的執行順序(methods、computed、data、watch、props)
從第一二點可知道data的初始化是在created時已經完成資料觀測(data observer)，並且諸如methods、computed屬性 props等已經初始化；那問題來了，
data props computed watch methods他們之間的生成順序是什麼呢？
根據翻看vue原始碼可知：
props => methods =>data => computed => watch; 懂了沒
四、自己構造的方法與vue生命週期的執行順序 如show這些
往往我們在開發專案時都經常用到 $refs 來直接訪問子元件的方法，但是這樣呼叫的時候可能會導致資料的延遲滯後的問題，則會出現bug。
解決方法則是推薦採取非同步回撥的方法，然後傳參進去，嚴格遵守vue的生命週期就可以解決 推薦 es6 的promise。
示例程式碼：
handleAsync () {
return new Promise(resolve=>{
const res="";
resolve(res)
})
}
...
async handleShow() {
await this.handleAsync().then(res=>{
this.$refs.child.show(res);
})
}
...
五、總結
vue 的生命週期，總得來說就是例項的建立和銷燬這段時間的一個機制吧。
————————————————
也是vue框架的資料間的互動通訊。