Vue生命周期是指Vue在执行过程中的某些关键时刻帮我们调用的函数。又叫做生命周期回调函数、生命周期函数、生命周期钩子。
生命周期函数的名字不能更改,不过其中的内容是由我们自己写的。另外,生命周期函数中的this都是指向vm或组件实例对象。
这是Vue官方文档中对于生命周期钩子的流程说明。
总共是8个,也就是4对生命周期钩子。接下来我按照执行顺序讲一讲。
挂载流程
beforeCreate是在数据创建(数据监测。数据代理)之前调用,此时无法通过vm访问到data中的数据、methods中的方法。
create是在数据创建完毕后调用,此时可以通过vm访问到data中的数据、methods中的方法。
接着到图中判断的部分,此阶段Vue开始解析模板,生成虚拟DOM,页面还不能显示解析好的内容。
beforeMount在Vue将内存中的虚拟DOM转为真实DOM插入页面之前调用(将要挂载),此时页面呈现的是未经Vue编译的DOM结构,可以对DOM进行操作,但是最终都不生效。
mounted(重要)在挂载完毕后调用,此时页面呈现的是经过Vue编译的DOM,对DOM的操作有效,但尽可能避免,到此为止初始化过程结束了。一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。
更新流程
beforeUpdate在数据更新之前调用,此时数据是新的,但页面还未改变。
updated在数据更新后调用,此时数据和页面都已更新。
销毁流程
beforeDestroy(重要)在vm将要销毁时调用,此时vm中所有的:data、methods、指令等都处于可用状态,马上要执行销毁过程。一般此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。
destroyed在销毁完毕后调用。