Vue生命周期函数

什么是生命周期函数？

生命周期函数（生命周期钩子）就是在某一个时间点会自动执行的函数

在创建Vue实例的时候，调用new Vue（），会产生运行8个生命周期函数，分别是（beforeCreate，created，beforeMount，mounted，beforeupdata，updated，beforeDestroy，destroyed）。

下图为vue官网文档生命周期图示

实际上运行生命周期函数要经历许多步骤。 首先初始化事件和生命周期函数相关内容，在这个时间点后beforeCreate函数被执行

然后vue会处理外部注入和双向绑定的一些内容，这部分初始化完成后，created函数被执行

随后进行逻辑判断，看是否有el挂载，随后判断是否有'template'属性，有的话将'template'属性的内容当作模板 ，没有的话将el挂载的内容当作模板

此时执行beforeMount 随后模板与数据相结合，挂载在页面， 页面挂载之后执行mounted

beforeMount: function () {
            console.log(this.$el);
            console.log("beforeMount");
            },
  mounted: function () {
            console.log(this.$el);
            console.log("mounted");

执行上述代码后可以得到

可以看出在beforeMount时模板还没有和数据结合，而mounted函数执行时已经挂载

而在调用vm.$destroy()方法销毁组件的时候，beforeDestroy函数被执行，

当组件销毁完毕时destroy函数被执行

可以看到当数据发生改变时beforeupdata函数被执行（数据重新渲染前），数据重新渲染后updated函数被执行

另外还有3个生命周期函数较为特殊，activated（被 keep-alive 缓存的组件激活时调用），deactivated（ keep-alive 缓存的组件失效时调用），errorCaptured(捕获一个来自后代组件的错误时被调用)