Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
首先上一张图（如有错误欢迎大牛指出，让小子有所进步）
Life Cycle.jpg
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同时刻进行操作，我们列出所有的钩子函数：
· beforeCreate
· created
· beforeMount
· mounted
· beforeUpdate
· updated
· beforeDestory
· destoryed
什么也不说了，上代码
<template>
<div>
<h2>Essential Links</h2>
<p>input输入框的内容为：{{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 创建前状态 ------------>');
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 创建完毕状态 ------------>');
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 挂载前状态 ------------>');
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 挂载结束状态 ------------>');
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 更新前状态 ------------>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log('真实dom结构：' + 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 更新完成状态 ------------>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log('真实dom结构：' + 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 销毁前状态 ------------>');
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 销毁完成状态 ------------>');
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>
吧啦吧啦，运行结果如下
初始化.png
运行中.png
销毁.png
几个小问题呢：
1.Vue的父组件和子组件生命周期钩子函数执行顺序
答：Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 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.在那个生命周期内调用异步请求
答：可在钩子函数 created，beforeMounted，mounted 中进行，因为在这三个钩子函数之后，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点
· 能更快获取到服务端数据，减少页面 loading 时间
· ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；
3. 在什么阶段可以调用DOM
答： 在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。
写在最后
兄台，若本篇文章对你有帮助，给小弟点个赞呦
