首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,下面这张图是从vue官网扣过来的,就是演示的vue的生命周期:
所以我们可以知道vue的生命周期有以下几个:
- beforeCreate 创建前
- created 创建后
- beforeMount 载入前
- mounted 载入后
- beforeUpdate 更新前
- updated 更新后
- beforeDestroy 销毁前
- destroyed 销毁后
就是可以分成:创建前/后,载入前/后,更新前/后,销毁前/后,8个阶段。
创建前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。
载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在