vue生命周期详解、钩子函数的调用（简单易懂）

定义：vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。

vue的钩子函数图解：

vue的钩子函数使用总结：

1、beforeCreate（创建前）:beforeCreate钩子函数，这个时候，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。无法访问到数据和真实的dom和data中的数据，可以在这里面使用loading

2、created（创建后）:created函数中可以对data对象里面的数据进行使用和更改，不会触发其他的钩子函数，一般可以在这里做初始数据的获取，也可以结束loading; 这里进行dom操作需要使用vue.nextTick()方法

3、beforeMount（挂载前）：beforeMount钩子函数，vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。在这里也可以更改数据，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4、mounted（挂载后）：mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，data.filter成功渲染，可以在这里操作真实dom等事情...

5、beforeUpdate （更新前）：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

6、updated（更新后）：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7、beforeDestroy（销毁前）：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8、destroyed（销毁后）：vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在。这个时候，执行destroyed，在这里做善后工作也可以

vue的钩子函数代码验证：

console打印效果：

demo验证代码：

<template><div><h3>{{testMsg}}</h3><p style="color:red;" id="testNum">{{testNum}}</p><div><button @click="changNum()">点击修改num的数值大小</button></div><p style="color:red;">过滤器处理后的值：{{testNum | add(10,20)}}</p><div><button @click="destroyVue()">销毁</button></div></div>
</template><script>
export default {name: 'HelloWorld',// data是数据对象data () {   return {testMsg:"原始值",num:2,}},//computed对象包括需要计算的属性，属性值依赖于别的数据computed:{testNum:function(){let that =this;return that.num * 3;},},//检测某一属性值的变化，属性值的变化会造成其他dom变化watch:{testNum:function(val){if(val>9){console.log("testNum的值变得大于9了！");}}},//组件内部的方法methods:{changNum:function(){let that =this;that.num=5;},destroyVue:function(){this.$destroy();}},//过滤器对象，filter的第一个参数默认是当前的item值filters:{add:function(val,num1,num2){return val+num1+num2;},},//vue实例创建前beforeCreate:function(){console.group('beforeCreate 创建前状态===============》'); //console的分组打印console.log("%c%s", "color:red","el     : " + this.$el); //输出undefinedconsole.log("%c%s", "color:red","data   : " + this.$data); //输出undefinedconsole.log("%c%s", "color:red","testMsg: " + this.testMsg);//输出undefinedconsole.log("%c%s", "color:red","testNum: " + this.testNum);//输出undefinedconsole.groupEnd(); },//vue实例创建完成，可以进行data对象中数据操作，一般获取初始化数据created:function(){console.group('created 创建完成状态===============》');console.log("%c%s", "color:red","el     : " + this.$el); //输出undefinedconsole.log("%c%s", "color:red","data   : " + this.$data); //输出[Object Object] ,初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//输出:"原始值",初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//输出：6，可以computed计算console.groupEnd(); },//vue实例挂载前，不能获取$el元素，生成的虚拟dombeforeMount:function(){console.group('beforeMount 挂载前状态===============》');console.log("%c%s", "color:red","el     : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data   : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text());  //无输出，dom未生成console.groupEnd(); },//mounted:function(){console.group('mounted 挂载完成的状态===============》');console.log("%c%s", "color:red","el     : " + this.$el); //输出[object HTMLDivElement],初始化成功console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text());  //输出6，初始化成功console.groupEnd(); },//更改data对象中数据后，页面渲染新数据前的状态beforeUpdate:function(){console.group('beforeUpdate 更新前的状态===============》');console.log("%c%s", "color:red","el     : " + this.$el); //初始化成功console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text());  //初始化成功console.groupEnd(); },//数据更改后并重新渲染后，dom也重新更新了updated:function(){console.group('updated 更新完成的状态==========');console.log("%c%s", "color:red","el     : " + this.$el); //初始化成功console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text());  //初始化成功console.groupEnd(); },//销毁前beforeDestroy:function(){console.group('beforeDestroy 销毁前的状态');console.log("%c%s", "color:red","el     : " + this.$el); console.log("%c%s", "color:red","data   : " + this.$data); console.log("%c%s", "color:red","testMsg: " + this.testMsg);console.log("%c%s", "color:red","testNum: " + this.testNum);console.log($("#testNum").text());  console.groupEnd(); },//销毁后修改data数据无效，生成的dom依旧存在destroyed(){console.group('destroyed 销毁完成的状态===============》');console.log("%c%s", "color:red","el     : " + this.$el); console.log("%c%s", "color:red","data   : " + this.$data); console.log("%c%s", "color:red","testMsg: " + this.testMsg);console.log("%c%s", "color:red","testNum: " + this.testNum);console.log($("#testNum").text());  console.groupEnd(); },}
</script>