關(guān)于生命周期其實(shí)在Android是一個(gè)比較常見的話題，我在接觸前端的時(shí)候难菌，我首先研究的就是這個(gè)東西燎潮。因?yàn)槟阒挥邪盐兆∵@個(gè)東西生命線，你才能更好的去運(yùn)用它憨闰，我這里就結(jié)合我自己的一些所見所聞做一點(diǎn)生命周期的介紹状蜗。
一、 生命周期示意圖：
vue生命周期示意圖
如上圖所示鹉动，在vue組件生命周期內(nèi)一共經(jīng)歷：
- beforeCreate:組件創(chuàng)建前
- created：組件創(chuàng)建
- beforeMount：組件掛載前
- mounted：組件掛載
- beforeUpdate：組件更新前
- updated：組件更新
- beforeDestroy：組件銷毀前
-
destroyed：組件銷毀
上面分別是對(duì)于組件生命周期的一些概述轧坎，但是并沒有去結(jié)合代碼去看，感覺帶入感并沒有這么強(qiáng)泽示，下面就用代碼引入的方法詳細(xì)的向大家介紹
二缸血、代碼解讀
<template>
<div ref="myapp" id="app">
<img src="./assets/logo.png">
<div>{{message}}</div>
<button @click="tokenMsg">說點(diǎn)什么</button>
</div>
</template>
<script>
export default {
data(){
return{
message: '我是一個(gè)菜鳥'
}
},
methods: {
tokenMsg(){
this.message += "+1";
}
},
beforeCreate() {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$refs.myapp);
console.log("%c%s", "color:red","data : " + this.$data);
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.$refs.myapp);
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.$refs.myapp));
console.log(this.$refs.myapp);
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.$refs.myapp);
console.log(this.$refs.myapp);
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.$refs.myapp);
console.log(this.$refs.myapp);
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.$refs.myapp);
console.log(this.$refs.myapp);
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.$refs.myapp);
console.log(this.$refs.myapp);
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.$refs.myapp);
console.log(this.$refs.myapp);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
}
</script>
上面的項(xiàng)目就是我用vue-cli腳手架新建的一個(gè)vue項(xiàng)目。并且改代碼只要拷貝進(jìn)項(xiàng)目可以直接去查看械筛。運(yùn)行效果如下
Chrome調(diào)試器log
從上面的log上面其實(shí)可以看出來：
1捎泻、 beforecreate data和組件都沒有被初始化的狀態(tài)
2、create data里面的內(nèi)容已經(jīng)可以訪問到了
3埋哟、 mounted 頁面已經(jīng)被掛載成功了笆豁。
那么結(jié)合代碼，當(dāng)點(diǎn)擊button的時(shí)候赤赊，發(fā)現(xiàn)console會(huì)發(fā)生變化
更新data里面的數(shù)據(jù)
由上圖可知闯狱，當(dāng)頁面data內(nèi)的數(shù)據(jù)發(fā)生變化的時(shí)候，并不會(huì)觸發(fā)上面說到的生命周期方法抛计，而是會(huì)觸發(fā)到beforeupdate和update方法哄孤。
image.png
同理當(dāng)頁面關(guān)閉的時(shí)候，頁面會(huì)先beforedestroy和destroyed方法爷辱。其中可以看見的是：
1录豺、beforedestroy狀態(tài)下，所有的頁面內(nèi)都是可以訪問的狀態(tài)
2饭弓、destroyed下，組件會(huì)被回收媒抠，但是data卻依舊能被訪問
三弟断、 生命周期總結(jié)
生命周期總結(jié)圖
可能這里結(jié)合實(shí)踐我可能需要bb兩句：
一、 created階段的ajax請(qǐng)求與mounted請(qǐng)求的區(qū)別：前者頁面視圖未出現(xiàn)趴生，如果請(qǐng)求信息過多阀趴，頁面會(huì)長時(shí)間處于白屏狀態(tài)
二昏翰、 mounted 不會(huì)承諾所有的子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染完畢刘急，可以用 vm.$nextTick
四棚菊、 父子組件生命周期
父組件如下：
<template>
<div ref="myapp" id="app">
<child-view v-if="showView"/>
<div>{{message}}</div>
<button @click="tokenMsg">說點(diǎn)什么</button>
<button @click="displayView">銷毀子組件</button>
</div>
</template>
<script>
import ChildView from './components/HelloWorld'
export default {
components:{
ChildView
},
data(){
return{
message: '我是一個(gè)菜鳥',
showView: true
}
},
methods: {
tokenMsg(){
this.message += "+1";
},
displayView(){
this.showView = !this.showView;
}
},
beforeCreate() {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
},
created: function () {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態(tài)===============》');
},
mounted: function () {
console.group('mounted 掛載結(jié)束狀態(tài)===============》');
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》');
}
}
</script>
子組件如下：
<template>
<div style="background: red;color: #ffffff;">
{{msg}}
<button @click="addMsg">說點(diǎn)什么</button>
</div>
</template>
<script>
export default {
methods: {
addMsg(){
this.msg += "+2"
}
},
beforeCreate() {
console.log('child beforeCreate 創(chuàng)建前狀態(tài)===============》')
},
created: function () {
console.log('child created 創(chuàng)建完畢狀態(tài)===============》');
},
beforeMount: function () {
console.log('child beforeMount 掛載前狀態(tài)===============》');
},
mounted: function () {
console.log('child mounted 掛載結(jié)束狀態(tài)===============》');
},
beforeUpdate: function () {
console.log('child beforeUpdate 更新前狀態(tài)===============》');
},
updated: function () {
console.log('child updated 更新完成狀態(tài)===============》');
},
beforeDestroy: function () {
console.log('child beforeDestroy 銷毀前狀態(tài)===============》');
},
destroyed: function () {
console.log('child destroyed 銷毀完成狀態(tài)===============》');
},
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
初始化效果如圖：
父子組件初始化
當(dāng)父組件data改變的時(shí)候：
父組件data改變
當(dāng)子組件data改變的時(shí)候：
子組件data改變的時(shí)候
當(dāng)銷毀子組件的時(shí)候：
當(dāng)銷毀子組件的時(shí)候
當(dāng)父組件被銷毀的時(shí)候
當(dāng)父組件被銷毀的時(shí)候
當(dāng)父組件改變傳給子組件的props值的時(shí)候
當(dāng)父組件改變傳給子組件的props值
總結(jié)：
1、 僅當(dāng)子組件完成掛載后叔汁，父組件才會(huì)掛載
2统求、當(dāng)子組件完成掛載后，父組件會(huì)主動(dòng)執(zhí)行一次beforeUpdate/updated鉤子函數(shù)（僅首次）
3据块、父子組件在data變化中是分別監(jiān)控的码邻，但是在更新props中的數(shù)據(jù)是關(guān)聯(lián)的
4、銷毀父組件時(shí)另假，先將子組件銷毀后才會(huì)銷毀父組件
六像屋、說在最后
可能有很多人都不會(huì)理解我為什么會(huì)花一個(gè)晚上的時(shí)候去整理這個(gè)東西，但是在我們的眼中每個(gè)程序員的能力并沒有太大的差距边篮，或者說我沒有能力做的比別人好就只能把基礎(chǔ)打的比別人牢了己莺。好了，又到凌晨了戈轿，去洗澡了
