一、官方圖解如下:
生命周期探究
<!DOCTYPE html>
<html>
<head>
<title></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>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
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 創(chuàng)建完畢狀態(tài)===============》');
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 掛載前狀態(tài)===============》');
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 掛載結(jié)束狀態(tài)===============》');
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 更新前狀態(tài)===============》');
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 更新完成狀態(tài)===============》');
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 銷毀前狀態(tài)===============》');
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 銷毀完成狀態(tài)===============》');
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>
create 和 mounted 相關(guān)
beforecreated：el 和 data 并未初始化
created:完成了 data 數(shù)據(jù)的初始化，el沒(méi)有
beforeMount：完成了 el 和 data 初始化
mounted ：完成掛載
另外在標(biāo)紅處锅移，我們能發(fā)現(xiàn)el還是 {{message}}吨铸，這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)，先把坑占住了晴埂。到后面mounted掛載的時(shí)候再把值渲染進(jìn)去。
update 相關(guān)
這里我們?cè)?chrome console里執(zhí)行以下命令
app.message= 'yes !! I do';
下面就能看到data里的值被修改后寻定，將會(huì)觸發(fā)update的操作儒洛。
destroy 相關(guān)
有關(guān)于銷毀，暫時(shí)還不是很清楚狼速。我們?cè)赾onsole里執(zhí)行下命令對(duì) vue實(shí)例進(jìn)行銷毀琅锻。銷毀完成后，我們?cè)僦匦赂淖僲essage的值，vue不再對(duì)此動(dòng)作進(jìn)行響應(yīng)了恼蓬。但是原先生成的dom元素還存在惊完，可以這么理解，執(zhí)行了destroy操作处硬，后續(xù)就不再受vue控制了小槐。
app.$destroy();
生命周期總結(jié)
這么多鉤子函數(shù)，我們?cè)趺从媚睾稍蚁氪蠹铱赡苡羞@樣的疑問(wèn)吧凿跳，我也有，哈哈哈疮方。
beforecreate: 舉個(gè)栗子：可以在這加個(gè)loading事件
created：在這結(jié)束loading控嗜，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行
mounted： 在這發(fā)起后端請(qǐng)求骡显，拿回?cái)?shù)據(jù)疆栏，配合路由鉤子做一些事情
beforeDestroy： 你確認(rèn)刪除XX嗎？ destroyed ：當(dāng)前組件已被刪除惫谤，清空相關(guān)內(nèi)容
二承边、created和mounted區(qū)別？
我們從圖中看兩個(gè)節(jié)點(diǎn)：
-
created:在模板渲染成html前調(diào)用石挂，即通常初始化某些屬性值博助，然后再渲染成視圖。 -
mounted:在模板渲染成html后調(diào)用痹愚，通常是初始化頁(yè)面完成后富岳，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。
其實(shí)兩者比較好理解拯腮，通常created使用的次數(shù)多一般用于接口獲取數(shù)據(jù)窖式，而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID) ;通常會(huì)有這一步动壤，而如果你寫入組件中萝喘，你會(huì)發(fā)現(xiàn)在created中無(wú)法對(duì)chart進(jìn)行一些初始化配置，一定要等這個(gè)html渲染完后才可以進(jìn)行琼懊，那么mounted就是不二之選阁簸。下面看一個(gè)例子（用組件）。
三哼丈、實(shí)例如下
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="example1">
<demo1></demo1>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript">
var Child={
data:function(){
return {
name:"",
age:"",
city:""
}
},
template:"<div id='kkk'>我的名字是：{{name}}启妹，我的年齡是：{{age}}，所在城市：{{city}}</div>",
created:function(){
this.name="王爽"
this.age = "45"
this.city ="北京"
var x = document.getElementById("kkk")//第一個(gè)命令臺(tái)錯(cuò)誤
console.log(x.innerHTML);
},
mounted:function(){
var x = document.getElementById("kkk")//第二個(gè)命令臺(tái)輸出的結(jié)果
console.log(x.innerHTML);
}
}
var vm = new Vue({
el:"#example1",
components: {
'demo1': Child
}
})
</script>
可以看到輸出如下：
可以看到都在created賦予初始值的情況下成功渲染出來(lái)了醉旦。
但是同時(shí)看console臺(tái)如下：
可以看到第一個(gè)報(bào)了錯(cuò)饶米，實(shí)際是因?yàn)檎也坏絠d桨啃，getElementById(ID) 并沒(méi)有找到元素，原因如下：
在created的時(shí)候檬输，視圖中的html并沒(méi)有渲染出來(lái)照瘾，所以此時(shí)如果直接去操作html的dom節(jié)點(diǎn)，一定找不到相關(guān)的元素而在mounted中丧慈，由于此時(shí)html已經(jīng)渲染出來(lái)了析命，所以可以直接操作dom節(jié)點(diǎn)，故輸出了上圖結(jié)果伊滋。
以上就是我自己總結(jié)的mounted和mounted的區(qū)別碳却，寫的比較簡(jiǎn)陋队秩，記錄下來(lái)笑旺，加深印象。
