Vue官方生命周期圖
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如哀墓，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板后雷、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等喷面。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)走孽，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
lifecycle.png
主要包含如下生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
創(chuàng)建Vue實(shí)例念逞，查看各生命周期中具體的內(nèi)容：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="app">
<!-- 綁定到Dom文本 -->
<div>{{message}}</div>
<input type="text" v-model="message" />
</div>
<script src="../plugin/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
// template: "<h1>{{message +'這是在template中的'}}</h1>", //在vue配置項(xiàng)中修改的
// render: function (createElement) {
// return createElement('h1', 'this is createElement')
// },
data: {
message: "Hello World"
},
beforeCreate: function () {
console.group("---beforeCreate---");
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);
},
created: function () {
console.group("---created---");
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);
},
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>
執(zhí)行結(jié)果如下
20180812141119.png
通過上圖我們可以看到
- new Vue() ---> beforeCreate
初始化事件和生命周期 此時(shí)$el,$data,message均未初始化
- beforeCreate ---> created
進(jìn)行初始化事件叨咖，進(jìn)行數(shù)據(jù)的觀測，此時(shí)$el未初始化,$data,message已初始化
- created ---> beforeMount
el: "#app",
// template: "<h1>{{message +'這是在template中的'}}</h1>",
// render: function (createElement) {
// return createElement('h1', 'this is createElement')
// }
- 模板編譯存在如下幾種情況：
- 首先判斷對(duì)象是否有el選項(xiàng)啊胶。如果有的話就繼續(xù)向下編譯甸各，如果沒有el選項(xiàng)，則停止編譯焰坪，也就意味著停止了生命周期趣倾，直到在該vue實(shí)例上調(diào)vm.$mount(el)
- 如果vue實(shí)例對(duì)象中有template參數(shù)選項(xiàng)，則將其作為模板編譯成render函數(shù)某饰。
- 如果存在render函數(shù)儒恋，則以render函數(shù)渲染
- 可以看編譯優(yōu)先級(jí)為：
render函數(shù)選項(xiàng) > template選項(xiàng) > el- 編譯完成，此時(shí)$el,$data,message均已初始化黔漂，觸發(fā)beforeMount
WX20180812-144339@2x.png
- beforeMount ---> mounted
在mounted之前只是對(duì)模版進(jìn)行編譯解析，具體內(nèi)容還是模板內(nèi)容瘟仿。在mounted之后根據(jù)實(shí)例中$el屬性值創(chuàng)建了虛擬DOM并且跟實(shí)例中的數(shù)據(jù)進(jìn)行綁定箱锐，然后替換掉$el屬性值比勉。
WX20180812-145914@2x.png
- Mounted ---> beforeUpdate
更新數(shù)據(jù),在data 修改后劳较，觸發(fā)beforeUpdate
- beforeUpdate ---> updated
重新編譯virtual DOM，并且顯示到頁面上
- mounted --> beforeDestroy --> destroyed
調(diào)用vm.$destroy()方法后浩聋，觸發(fā)beforeDestroy,然后斷開數(shù)據(jù)監(jiān)控观蜗，完成后觸發(fā)destroyed。調(diào)用$destroy后衣洁，修改實(shí)例數(shù)據(jù)墓捻，頁面顯示不會(huì)發(fā)生變化，但是實(shí)例中元素綁定的事件能正常執(zhí)行坊夫。
