【W(wǎng)eb前端基礎(chǔ)知識(shí)】Vue中的生命周期

以下主要從幾個(gè)方面來(lái)講：

1.vue的生命周期是什么

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

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

一、vue的生命周期是什么

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

1. beforeCreate 
2.   created 
3.   beforeMount 
4.   mounted 
5.   ( 
6.       beforeUpdate 
7.       updated 
8.   ) 
9.   beforeDestroy 
10.   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他們之間的生成順序是什么呢?

props => methods =>data => computed => watch;