Vue生命周期

Vue生命周期的八个阶段

1. beforeCreate

会在实例初始化完成、props解析之后，data()和computed等处理之前调用。此时不能获得DOM节点，data，computed，watch，methods上的方法和数据均不能访问。

2. created

vue实例已经创建，挂载阶段还未开始，因此 $el 属性仍不可用。此时不能获得DOM元素，能访问 data，computed，watch，methods上的方法和数据。

3. beforeMount

组件内容被渲染到页面之前自动执行的函数，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。DOM模板已经在内存中编译好了，但是未挂载到页面中。

4. mounted

组件被渲染之后自动执行的函数，异步请求都写在这里，数据和DOM都已被渲染出来。一般在此阶段：开启定时器，发送网络请求，订阅消息，绑定自定义时间等。

5. beforeUpdate

数据变化的时候自动执行的函数，此时变化后的数据还未渲染到页面之上，即数据是新的，但页面显示的是旧的，页面和数据不同步。

6. updated

数据变化之后自动执行的函数，此时变化后的数据已经渲染到页面之上，即页面是新的数据也是新的。

7. beforeDestroy

当 Vue 应用被销毁时，自动执行的函数。一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件等。

8. destroyed

当 Vue 应用被销毁后，且 dom 完全销毁之后，自动执行的函数。

图片转自：https://www.jianshu.com/p/4f8daeafe58f