Vue2.0關於生命週期和鉤子函數

時間 2019-11-11

標籤 vue2.0 vue 關於生命週期鉤子函數简体版

原文原文鏈接

Vue生命週期簡介：

Vue1.0+和Vue2.0在生命週期鉤子上的區別仍是很大的，以下：javascript

代碼驗證：html

<!DOCTYPE html>vue

<html>java

<head>chrome

<meta charset="utf-8">後端

<title></title>app

<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>函數

</head>this

<body>.net

<div id="app">

<p>{{ message }}</p>

</div>

<script type="text/javascript">

var app = new Vue({

el:'#app',

data:{

message:"Toney is a girl"

},

beforeCreate:function(){

console.group('beforeCreat 建立前的狀態======》'); //控制檯輸出的語句產生不一樣的層級嵌套關係

console.log("%c%s","color:red","el : "+this.$el); //undefined, %c字符%s字符串

console.log("%c%s","color:red","data : "+this.$data"); //undefined

console.log("%c%s","color:red","message: "+this.message); //undefined

},

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("%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("%c%s","color:red","data : "+this.$data"); //已被初始化

console.log("%c%s","color:red","message: "+this.message); //已被初始化

},

beforeUpdate:function(){

console.log("beforeUpdate 更新前狀態======》");

console.log("%c%s","color:red","el:"+this.$el);

console.log("%c%s","color:red","data:"+this.$data);

console.log("%c%s","color:red","message:"+this.$message);

},

updated:function(){

console.log("updated 更新完成狀態======》");

console.log("%c%s","color:red","el:"+this.$el);

console.log("%c%s","color:red","data:"+this.$data);

console.log("%c%s","color:red","message:"+this.$message);

},

beforeDestory:function(){

console.log("beforeDestory 銷燬前狀態======》");

console.log("%c%s","color:red","el:"+this.$el);

console.log("%c%s","color:red","data:"+this.$data);

console.log("%c%s","color:red","message:"+this.$message);

},

destoryed:function(){

console.log("destoryed 銷燬完成狀態======》");

console.log("%c%s","color:red","el:"+this.$el);

console.log("%c%s","color:red","data:"+this.$data);

console.log("%c%s","color:red","message:"+this.$message);

}

})

</script>

</body>

關於更新

在chrome console中輸入命令：

app.message="I am a girl"

關於銷燬

在chrome console中輸入命令：

app.$destroy();

生命週期總結：

beforecreate: 例子：能夠在這加個loading事件；

created：在這結束loading，還作一些初始化，實現函數自執行；

mounted：在這發起後端請求，拿回數據，配合路由鉤子作一些事情；

beforeDestory：你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。