Vue的生命周期理解，简单易理解

什么是Vue的生命周期

简单来说，Vue的生命周期就是vue实例从创建到销毁的一个过程，即从创建–>初始化数据–>编译模板–>挂载Dom -->渲染、更新 -->渲染–>销毁 的一系列过程。

Vue的生命周期有哪些阶段

Vue的生命周期，主要过程有：创建、挂载、更新、销毁 这四个过程，其对应的钩子函数执行顺序，分别是：
beforeCreate（创建前）、created（创建后）、beforeMount（挂载前）、mounted（挂载后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）。
这里放一张官网的截图，可以更清晰的看到它们的执行过程：

值得注意的是，beforeUpdate（更新前）、updated（更新后）是在每次vue页面更新时，都会执行的钩子函数，通常我们可以在这些钩子函数中写一些页面更新会触发的逻辑。

钩子函数详解

了解钩子函数每个阶段进行了什么操作，可以方便我们在更合适的位置加入我们的逻辑
1）beforeCreate
在实例初始化(new Vue())后执行的函数，此时的数据监听和事件绑定机制都未完成，是获取不到DOM节点的。一般我们可以在此阶段加loading事件，在加载实例时触发

（2）created
在这个阶段vue实例已经创建，以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始，仍然获取不到DOM元素。在此阶段，初始化完成时的事件写在这里，如在这结束loading事件，也可以进行异步请求

（3）beforeMount
在这个阶段完成了DOM的初始化，但仍然无法获取到具体的DOM元素，因为vue还没有进行根节点挂载，但是根节点已经创建完成，下面Vue对DOM的操作将围绕这个根节点进行。beforeMount这个阶段是过渡性的，在项目中使用得比较少

（4）mounted
在这个阶段，实例已经被挂载完成了，也就是能获取到数据和DOM元素了。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick.
（5）beforeUpdate
在数据发生改变，但页面还没有完成更新时执行的操作，在此阶段视图的数据和DOM元素的数据没有保持同步。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器

（6）updated
这个时候数据发生了改变，并且视图页面也已经完成了更新，因此，该阶段看到的DOM元素的内容是最新内容。

注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick

（7）beforeDestroy
此阶段Vue实例仍然完全可用，也就是还能访问到页面的响应式数据和事件。可以在这里注销eventBus等事件

（8）destroyed
DOM元素被销毁，此时对应 的Vue 实例所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。