Vue生命周期是指vue實例對象從創(chuàng)建之初到銷毀的過程枝笨，vue所有功能的實現(xiàn)都是圍繞其生命周期進行的，在生命周期的不同階段調(diào)用對應(yīng)的鉤子函數(shù)可以實現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能杨伙。
首先上一張圖（如有錯誤歡迎大牛指出，讓小子有所進步）
可以看到在vue一整個的生命周期中會有很多鉤子函數(shù)提供給我們在vue生命周期不同時刻進行操作萌腿，我們列出所有的鉤子函數(shù)：
· beforeCreate
· created
· beforeMount
· mounted
· beforeUpdate
· updated
· beforeDestory
· destoryed
什么也不說了限匣，上代碼
<template>
<div>
<h2>Essential Links</h2>
<p>input輸入框的內(nèi)容為：{{msg}}</p>
<input v-model="msg" placeholder="edit me"/> <br />
<button @click="destory">銷毀按鈕</button>
</div>
</template>
<script>
export default({
data(){
return {
msg: "hello Vue.js"
}
},
methods: {
//銷毀
destory() {
this.$destroy();
}
},
beforeCreate() {
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() {
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() {
console.group('beforeMount 掛載前狀態(tài) ------------>');
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() {
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() {
console.group('beforeUpdate 更新前狀態(tài) ------------>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log('真實dom結(jié)構(gòu)：' + document.getElementById('app').innerHTML);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated() {
console.group('updated 更新完成狀態(tài) ------------>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log('真實dom結(jié)構(gòu)：' + document.getElementById('app').innerHTML);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestory() {
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() {
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>
<style>
</style>
吧啦吧啦，運行結(jié)果如下
幾個小問題呢：
1.Vue的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序
答：Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序可以歸類為以下 4 部分：
- 加載渲染過程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
· 上述為同步引入組件的加載渲染順序毁菱，若為異步引入組件則加載順序如下
父 beforeCreate -> 父 created -> 父 beforeMount -> 父 mounted -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted
· 同步引入例子：import Page from '@/components/page'
· 異步引入例子：const Page = () => import('@/components/page')
或者： const Page = resolve => require(['@/components/page'], page) - 子組件更新過程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated - 父組件更新過程
父 beforeUpdate -> 父 updated - 銷毀過程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
2.在那個生命周期內(nèi)調(diào)用異步請求
答：可在鉤子函數(shù) created米死，beforeMounted，mounted 中進行贮庞，因為在這三個鉤子函數(shù)之后峦筒，data 已經(jīng)創(chuàng)建，可以將服務(wù)端端返回的數(shù)據(jù)進行賦值窗慎。但是本人推薦在 created 鉤子函數(shù)中調(diào)用異步請求物喷，因為在 created 鉤子函數(shù)中調(diào)用異步請求有以下優(yōu)點
· 能更快獲取到服務(wù)端數(shù)據(jù)，減少頁面 loading 時間
· ssr 不支持 beforeMount 遮斥、mounted 鉤子函數(shù)峦失，所以放在 created 中有助于一致性；
3. 在什么階段可以調(diào)用DOM
答： 在鉤子函數(shù) mounted 被調(diào)用前伏伐，Vue 已經(jīng)將編譯好的模板掛載到頁面上宠进，所以在 mounted 中可以訪問操作 DOM。
寫在最后
兄臺藐翎，若本篇文章對你有幫助材蹬，給小弟點個贊呦
