- 加載渲染過程
-> 父beforeCreate -> 父created -> 父beforeMount
-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted
-> 父mounted
- 子組件更新過程
-> 父beforeUpdate
-> 子beforeUpdate -> 子updated
-> 父updated
- 父組件更新過程
-> 父beforeUpdate -> 父updated
- 銷毀過程
-> 父beforeDestroy
-> 子beforeDestroy -> 子destroyed
-> 父destroyed
1暮胧、vue的生命周期
2吻育、實(shí)際操作
下面我們在實(shí)際的代碼執(zhí)行過程中理解父子組件生命周期創(chuàng)建過程以及鉤子函數(shù)執(zhí)行的實(shí)時(shí)狀態(tài)變化。
測試基于下面的代碼环鲤，引入vue.js文件后即可執(zhí)行。（打開頁面后狱杰，再按一次刷新會自動進(jìn)入debugger狀態(tài)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components :msg="msg1" v-if="show"></my-components>
</keep-alive>
</div>
</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
var child = {
template: '<div>from child: {{childMsg}}</div>',
props: ['msg'],
data: function() { return {
childMsg: 'child' }
},
beforeCreate: function () { debugger;
},
created: function () { debugger;
},
beforeMount: function () { debugger;
},
mounted: function () { debugger;
},
deactivated: function(){
alert("keepAlive停用");
},
activated: function () {
console.log('component activated');
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message
}
console.log(this.$el);
console.log(state);
},
}; var vm = new Vue({
el: '#app',
data: {
message: 'father',
msg1: "hello",
show: true },
beforeCreate: function () { debugger;
},
created: function () { debugger;
},
beforeMount: function () { debugger;
},
mounted: function () { debugger;
},
beforeUpdate: function () {
alert("頁面視圖更新前");
},
updated: function () {
alert("頁面視圖更新后");
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message
}
console.log(this.$el);
console.log(state);
},
components: { 'my-components': child
}
}); </script>
</html>
3.1搬味、生命周期調(diào)試
首先我們創(chuàng)建了一個(gè)Vue實(shí)例vm章郁，將其掛載到頁面中id為“app”的元素上。
3.1.1制市、根組件的beforeCreate階段
可以看出抬旺，在調(diào)用beforeCreate()函數(shù)時(shí)，只進(jìn)行了一些必要的初始化操作（例如一些全局的配置和根實(shí)例的一些屬性初始化）祥楣，此時(shí)data屬性為undefined开财，沒有可供操作的數(shù)據(jù)。
3.1.2误褪、根組件的Created階段
調(diào)用Created()函數(shù)床未，在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)代理和動態(tài)數(shù)據(jù)綁定(data observer)振坚，屬性和方法的運(yùn)算薇搁， watch/event 事件回調(diào)。然而渡八，掛載階段還沒開始啃洋，$el 屬性目前不可見传货。
3.1.3、根組件的beforeMount階段
在調(diào)用boforeMount()函數(shù)前首先會判斷對象是否有el選項(xiàng)宏娄。如果有的話就繼續(xù)向下編譯问裕，如果沒有el選項(xiàng)，則停止編譯孵坚，也就意味著停止了生命周期粮宛，直到在該vue實(shí)例上調(diào)用vm.$mount(el)
在這個(gè)例子中，我們有el元素卖宠，因此會調(diào)用boforeMount()函數(shù),此時(shí)已經(jīng)開始執(zhí)行模板解析函數(shù)巍杈，但還沒有將$el元素掛載頁面，頁面視圖因此也未更新扛伍。在標(biāo)紅處筷畦，還是 {{message}}，這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)刺洒，先把坑占住了鳖宾。到后面mounted掛載的時(shí)候再把值渲染進(jìn)去。
3.1.4逆航、子組件的beforeCreate鼎文、Created、beforeMount因俐、Mounted階段
在父組件執(zhí)行beforeMount階段后拇惋，進(jìn)入子組件的beforeCreate、Created女揭、beforeMount階段蚤假，這些階段和父組件類似，按下不表吧兔。beforeMount階段后磷仰，執(zhí)行的是Mounted階段，該階段時(shí)子組件已經(jīng)掛載到父組件上境蔼，并且父組件隨之掛載到頁面中灶平。
由下圖可以知道，在beforeMount階段之后箍土、Mounted階段之前逢享，數(shù)據(jù)已經(jīng)被加載到視圖上了，即$el元素被掛載到頁面時(shí)觸發(fā)了視圖的更新吴藻。
3.1.5瞒爬、子組件的activated階段
我們發(fā)現(xiàn)在子父組件全部掛載到頁面之后被觸發(fā)。這是因?yàn)樽咏M件my-components被<keep-alive> 包裹，隨$el的掛載被觸發(fā)侧但。如果子組件沒有被<keep-alive>包裹矢空，那么該階段將不會被觸發(fā)。
3.1.6禀横、父組件的mounted階段
mounted執(zhí)行時(shí)：此時(shí)el已經(jīng)渲染完成并掛載到實(shí)例上。
至此柏锄，從Vue實(shí)例的初始化到將新的模板掛載到頁面上的階段已經(jīng)完成酿箭，退出debugger。下面我們來看一下deactivated趾娃、beforeUpdate缭嫡、updated、beforeDestroy茫舶、destroyed鉤子函數(shù)械巡。
3.2刹淌、deactivated饶氏、beforeUpdate、updated階段
由生命周期函數(shù)可知：當(dāng)數(shù)據(jù)變化后有勾、虛擬DOM渲染重新渲染頁面前會觸發(fā)beforeUpdate()函數(shù)疹启，此時(shí)視圖還未改變。當(dāng)虛擬DOM渲染頁面視圖更新后會觸發(fā)updated()函數(shù)蔼卡。
我們不妨改變vm.show = false喊崖，當(dāng)修改這個(gè)屬性時(shí)，不僅會觸發(fā)beforeUpdate雇逞、updated函數(shù)荤懂，還會觸發(fā)deactivated函數(shù)（因?yàn)閗eep-alive 組件停用時(shí)調(diào)用）。我們不妨想一下deactivated函數(shù)會在beforeUpdate后還是updated后調(diào)用塘砸。
我們在控制臺輸入vm.show = false节仿。得到三者的調(diào)用順序分別為beforeUpdate、deactivated掉蔬、updated廊宪。我們可以知道的是deactivated函數(shù)的觸發(fā)時(shí)間是在視圖更新時(shí)觸發(fā)。因?yàn)楫?dāng)視圖更新時(shí)才能知道keep-alive組件被停用了女轿。
3.3箭启、beforeDestroy和destroyed鉤子函數(shù)間的生命周期
現(xiàn)在我們對Vue實(shí)例進(jìn)行銷毀，調(diào)用app.$destroy()方法即可將其銷毀蛉迹，控制臺測試如下：
我們發(fā)現(xiàn)實(shí)例依然存在傅寡，但是此時(shí)變化已經(jīng)發(fā)生在了其他地方。
beforeDestroy鉤子函數(shù)在實(shí)例銷毀之前調(diào)用。在這一步荐操，實(shí)例仍然完全可用大猛。
destroyed鉤子函數(shù)在Vue 實(shí)例銷毀后調(diào)用。調(diào)用后淀零，Vue 實(shí)例指示的所有東西都會解綁定挽绩，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀（也就是說子組件也會觸發(fā)相應(yīng)的函數(shù)）驾中。這里的銷毀并不指代'抹去'唉堪，而是表示'解綁'。
銷毀時(shí)beforeDestory函數(shù)的傳遞順序?yàn)橛筛傅阶蛹缑瘢琩estory的傳遞順序?yàn)橛勺拥礁浮?/p>
4唠亚、一些應(yīng)用鉤子函數(shù)的想法
在created鉤子中可以對data數(shù)據(jù)進(jìn)行操作，這個(gè)時(shí)候可以進(jìn)行ajax請求將返回的數(shù)據(jù)賦給data持痰。
雖然updated函數(shù)會在數(shù)據(jù)變化時(shí)被觸發(fā)灶搜，但卻不能準(zhǔn)確的判斷是那個(gè)屬性值被改變，所以在實(shí)際情況中用computed或match函數(shù)來監(jiān)聽屬性的變化工窍，并做一些其他的操作割卖。
在mounted鉤子對掛載的dom進(jìn)行操作，此時(shí)患雏，DOM已經(jīng)被渲染到頁面上鹏溯。
在使用vue-router時(shí)有時(shí)需要使用<keep-alive></keep-alive>來緩存組件狀態(tài)，這個(gè)時(shí)候created鉤子就不會被重復(fù)調(diào)用了淹仑，如果我們的子組件需要在每次加載或切換狀態(tài)的時(shí)候進(jìn)行某些操作丙挽，可以使用activated鉤子觸發(fā)。
所有的生命周期鉤子自動綁定 this 上下文到實(shí)例中匀借，所以不能使用箭頭函數(shù)來定義一個(gè)生命周期方法 (例如 created: () => this.fetchTodos())颜阐。這是導(dǎo)致this指向父級。
轉(zhuǎn)載于：https://www.cnblogs.com/caoshouling/p/13403019.html
