Vue 生命周期簡(jiǎn)介
vue生命周期圖解.jpg
生命周期的鉤子 LifeCycle hooks
每個(gè) Vue 實(shí)例在被創(chuàng)建的時(shí)候都要經(jīng)過一系列的初始化過程——例如，需要重新設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、講師類掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己代碼的機(jī)會(huì)。
| Vue 2.0 | Description |
|---|---|
| beforeCreate | 組件實(shí)例剛被創(chuàng)建，組件屬性計(jì)算之前，如 data 等屬性 |
| created | 組件實(shí)例創(chuàng)建完成，屬性已綁定，但DOM 還未生成，$el 屬性還不存在 |
| beforeMount | 模板編譯掛載之前 |
| mounted | 模板編譯掛載之后 |
| beforeUpdate | 組件更新之前 |
| update | 組件更新之后 |
| activated | for keep-alive ，組件被激活時(shí)調(diào)用 |
| deactivate | for keep-alive ， 組件被移除時(shí)調(diào)用 |
| beforeDestory | 組件銷毀前調(diào)用 |
| destoryed | 組件銷毀后都調(diào)用 |
生命周期鉤子函數(shù)的執(zhí)行順序和執(zhí)行時(shí)間：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello gaoxin!!"
},
beforeCreate: function () {
console.group("beforeCreate 創(chuàng)建實(shí)例之前===========");
console.log("el: " + this.$el); // undefined
console.log("data: " + this.$data); // undefined
console.log("message: " + this.message);
},
created: function () {
console.group("Created: 創(chuàng)建實(shí)例完成===========");
console.log("el: " + this.$el); // undefined
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
beforeMount: function () {
console.group("beforeMount 掛載前狀態(tài)==========");
console.log("el: " + this.$el); // 已被初始化
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
mounted: function () {
console.group("Mounted 掛載結(jié)束狀態(tài)=============");
console.log("el: " + this.$el); // 已被初始化
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
beforeUpdate: function () {
console.group("beforeUpdate 更新前狀態(tài)=========");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
updated: function () {
console.group("Updated 更新完成狀態(tài)");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy: function () {
console.group("beforeDestroy 實(shí)例銷毀之前");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
destroyed: function () {
console.group("Destoryed 實(shí)例銷毀之后");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
}
})
</script>
</body>
</html>
create 和 mounted 相關(guān)
執(zhí)行上面代碼，可以看到：
beforecreated ：el 和 data 并未初始化
created：完成了data數(shù)據(jù)的初始化 el 沒有
beforeMount：完成了el 和 data的初始化
mounted：完成了掛載
也就是說掛載前的狀態(tài)是虛擬DOM技術(shù)，先把坑站住了掛載之后才真正的把值渲染進(jìn)去
update 相關(guān)
我們?cè)跒g覽器console里執(zhí)行命令：
app.message = "hello~"
我們就出發(fā)了update相關(guān)的鉤子函數(shù)也就是說data里的值被修改會(huì)出發(fā)update的操作
destory 相關(guān)
我們?cè)跒g覽器console里執(zhí)行命令：
app.$destroy();
觸發(fā)了destroy相關(guān)的鉤子函數(shù)，也就是說組件被銷毀~
更改message的值DOM中的值不變也就是說DOM元素依然存在只是不受vue控制了
