首先官方圖一張
|
生命週期函數 |
說明 |
| beforeCreate |
組件實例剛被創建,組件屬性計算之前,如data屬性等 |
|
created |
組件實例創建完成,屬性已經綁定,但是DOM還未生成[也就是界面還沒有渲染],$el屬性還不存在 |
|
beforeMount |
模板編譯|界面渲染|掛載之前 |
|
mounted |
模板編譯|界面渲染|掛載完畢 |
|
beforeUpdate |
當data中數據更新的時候,頁面會刷新,這個是刷新之前 |
|
updated |
頁面刷新之後 |
|
activated |
for keep-alive , 組件被激活時調用 |
|
deactivated |
for keep-alive , 組件被移除時調用 |
|
beforeDestroy |
組件銷燬前調用 |
|
destoryed |
組件銷燬後調用 |
可以複製下面代碼 到任意HTML文件中執行查看[當然更推薦抄一遍]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LifeCycle</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "FUCK"
},
methods: {
fuck: function () {
return "FUCK!!!";
}
},
beforeCreate: function () {
// 此時VUE生命剛開始[啥都沒有]
console.group("beforeCreate 函數");
console.log("%c%s", "color:red", "fuck : " + this.fuck()); // 報錯
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); // undefined
},
created: function () {
// created 初始化完畢DATA和Methods等屬性
// 作用: 可以做一下初始化的操作,後端請求數據之類的,
console.group("created 函數");
console.log("%c%s", "color:red", "fuck : " + this.fuck());
console.log("%c%s", "color:red", "$el : " + this.$el);
/* console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
console.log(this.$el);
console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
console.log("%c%s", "color:red", "data : " + this.$data);
/* console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
console.log(this.$data);
console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
console.log("%c%s", "color:red", "message : " + this.message);
},
beforeMount: function () {
console.group("beforeMount 函數");
// 組件被掛載,el文件初始化完畢,頁面還沒顯示出來
console.log("%c%s", "color:red", "$el : " + this.$el);
/* console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
console.log(this.$el);
console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
console.log("%c%s", "color:red", "data : " + this.$data);
/* console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
console.log(this.$data);
console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
console.log("%c%s", "color:red", "message : " + this.message);
},
mounted: function () {
console.group("mounted 函數");
// 組件被掛載,el文件初始化完畢,頁面已顯示
// 上一個頁面通過router傳過來的參數在這個位置纔會有有
// 作用 : 可以獲取上一個文件[VUE]傳過來的參數之類的,也可以吧created中的事情拿到這裏來做
console.log("%c%s", "color:red", "$el : " + this.$el);
/* console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
console.log(this.$el);
console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
console.log("%c%s", "color:red", "data : " + this.$data);
/* console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
console.log(this.$data);
console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
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("%c%s","color:red","↓↓↓this.$el start↓↓↓");
console.log(this.$el);
console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
console.log("%c%s", "color:red", "data : " + this.$data);
/* console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
console.log(this.$data);
console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
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("%c%s","color:red","↓↓↓this.$el start↓↓↓");
console.log(this.$el);
console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
console.log("%c%s", "color:red", "data : " + this.$data);
/* console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
console.log(this.$data);
console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
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("%c%s","color:red","↓↓↓this.$el start↓↓↓");
console.log(this.$el);
console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
console.log("%c%s", "color:red", "data : " + this.$data);
/* console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
console.log(this.$data);
console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
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("%c%s","color:red","↓↓↓this.$el start↓↓↓");
console.log(this.$el);
console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
console.log("%c%s", "color:red", "data : " + this.$data);
/* console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
console.log(this.$data);
console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
console.log("%c%s", "color:red", "message : " + this.message);
}
});
</script>
</body>
</html>
觸發update和destory函數可以在F12控制檯輸入
app.message = "xxx";
app.$destory();
來調用觸發
觀察即可理解;