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