vue生命週期整理學習

生命週期圖如下：

生命週期過程：

生命週期過程中，首先建立vue例項，然後初始化事件並監測資料。在created階段之前就完成了資料的監測（這個階段data和data的屬性已存在，但是el未初始化）
created函式觸發後，開始初始化el，並且編譯template。在created和beforeMount這兩個階段之間發生的事情比較多：

首先判斷物件是否有el選項，有的話向下編譯，沒有的話，則停止編譯，也就意味著停止了生命週期，直到在該vue例項上呼叫vm.$mount(el)。
template引數選項是否對生命週期有影響：
(a) 如果vue例項物件中有template引數選項，則將其作為模板編譯成render函式。
(b) 如果沒有template選項，則將外部HTML作為模板編譯。
(c) 可以看到template中的模板優先順序要高於outer HTML的優先順序。

生命週期階段詳情

vue2.0	描述
beforeCreate	組建例項化剛被建立，該過程在元件屬性計算之前，在這個時候data和el,以及自定義的message都是undefined
created	元件例項化建立完成，屬性已繫結，但是dom還未生成，$el屬性還不存在,在這個時候data和message已經初始化了
beforeMount	模板編譯/掛載之前 $el和data、message都被初始化了
mounted	模板編譯/掛載之後 $el和data、message都被初始化了
beforeUpdate	元件更新之前
updated	元件更新之後
activated	keep-alive,元件啟用時被呼叫
deactivated	keep-alive,元件移除時被呼叫
beforeDestory	元件銷燬前被呼叫
destory	元件銷燬後被呼叫

eg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue生命週期</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button v-on:click="change">點選改變值</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
change: function () {
this.message = this.message.split('').reverse().join('');
}
},
beforeCreate: function () {
console.group('beforeCreate 建立前狀態===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 建立完畢狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結束狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷燬前狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷燬完成狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
複製程式碼

mounted和beforeMount這兩種情況$el和data、message都被初始化了，但是其有一定的區別，beforeMount時應用虛擬Dom先把坑粘住了。mounted是掛載後的情況，在該階段的時候，把值渲染進去。在beforeUpdate,可以監聽到data的變化但是view層沒有被重新渲染，view層的資料沒有變化。等到updated的時候 view層才被重新渲染，資料更新。如下圖所示。

總結

beforeCreated：該狀態在new Vue()之後，但這個階段el,data，以及data內部的賦值都沒有初始化。
created: 該狀態資料已經被檢測到了，data和data內部的值都可以取到，但是el還沒有初始化
beforeMount:掛載前，這個時候el已經初始化了，但是dom結構內的使用data引用的值還沒有被渲染
Mounted:掛載後，dom結構內的使用data引用的值已經被渲染

vue生命週期整理學習

生命週期圖如下：

生命週期過程：

生命週期階段詳情

eg

總結

相關文章