以下主要從幾個方面來講：

1.vue的生命周期是什么

2.vue生命周期的在項目中的執(zhí)行順序

3.vue中內(nèi)置的方法 屬性和vue生命周期的運行順序（methods、computed、data、watch）

4.自己構造的方法與vue生命周期的運行順序 如show這些

5.總結

一、vue的生命周期是什么

vue每個組件都是獨立的，每個組件都有一個屬于它的生命周期，從一個組件創(chuàng)建、數(shù)據(jù)初始化、掛載、更新、銷毀，這就是一個組件所謂的生命周期。在組件中具體的方法有:

? ? beforeCreate

? ? created

? ? beforeMount

? ? mounted

? ? (

? ? ? ? beforeUpdate

? ? ? ? updated

? ? )

? ? beforeDestroy

? ? destroyed

? ? 對應的中文就如其字面意思，英文不好的童鞋可以有道翻翻

? ? 好了，這里要上圖啦~~~

二、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; 懂了沒

四、自己構造的方法與vue生命周期的運行順序 如show這些

? ? 往往我們在開發(fā)項目時都經(jīng)常用到 $refs 來直接訪問子組件的方法，但是這樣調(diào)用的時候可能會導致數(shù)據(jù)的延遲滯后的問題，則會出現(xiàn)bug。

解決方法則是推薦采取異步回調(diào)的方法，然后傳參進去，嚴格遵守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 的生命周期，總得來說就是實例的創(chuàng)建和銷毀這段時間的一個機制吧。也是vue框架的數(shù)據(jù)間的交互通信。其實現(xiàn)在看來也沒那么難，但是vue的源碼實現(xiàn)這一套機制那是難得一逼，涉及到復雜的算法如diff算法，有興趣的童鞋可以去深入了解一下。喜歡的童鞋點個贊 啊哈哈，又來騙贊啦

作者：Kevin這條街最靚的仔

鏈接：http://www.itdecent.cn/p/410b6099be69

來源：簡書

簡書著作權歸作者所有，任何形式的轉載都請聯(lián)系作者獲得授權并注明出處。