VUE生命周期
每一个vue组件都是有生命周期的，通过其生命周期，我们可以在其中初始化数据和销毁数据的操作。每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉：
通过这张图可以看出vue生命周期主要包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestory、destoryed这几种。
可以通过以下代码来看一下这几个生命周期的具体执行顺序
beforeCreate: function () {
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: function () {
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: function () {
console.group('beforeMount 挂载前状态===============》');
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); //已被初始化
},
mounted: function () {
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: function () {
console.group('beforeUpdate 更新前状态===============》');
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);
},
updated: function () {
console.group('updated 更新完成状态===============》');
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);
},
beforeDestroy: function () {
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: function () {
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)
}在浏览器中就可以看到输出的结果
beforeCreate
beforeCreate为组件实例刚刚创建，在组件属性计算之前。这个事件是最开始的事件，所有的方法都还没有开始初始化，包括data、el。
created
在这个周期中，组件实例创建已经完成，并且属性也绑定完成，data已经可以使用了，但是此时DOM还未生成，$el属性还不存在。
在最上方的周期全图可以看出，vue首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。如果将页面中的el节点删除掉，则后续的生命周期则不会再执行。
beforeMount和mounted
这两个生命周期分别是组件模板编译挂载前后。但是需要注意一点的是，mounted不完全保证组件已经存在于document中。
一般情况下载mounted中可以读取到dom节点了，比如说使用echarts插件，就可以在这部分来调用方法来生成图表。
beforeUpdate和updated
这两个生命周期分别是更新前和更新后，也就是说data里的值被修改后，将会触发updated的操作。
有时当data更新后我们不一定希望页面效果也进行更新，那么就需要用到beforeUpdate来进行判断，返回false则不进行更新，返回true则进行更新。
在updated中检测是否更新完成，然后执行更新后需要进行的操作。
beforeDestory和destoryed
这两个分别为组件销毁前和销毁后，其主要的作用是销毁组件中创建的定时任务，例如setInterval。如果没有将其清除掉，则会出现报错的现象。
总结
beforecreate : 举个栗子：可以在这加个loading事件 created ：在这结束loading，还做一些初始化，实现函数自执行 mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容
腾讯云开发者
