详解Vue生命周期

Posted 2021-02-21 vipuser

下图是vue官网的VUE实例生命周期图示：

按照图示，我们能解读到哪些内容呢？

1. vue生命周期分为8个阶段： 创建前/后，载入前/后，更新前/后,销毁前/后
2. 在创建前，即beforeCreate阶段，vue实例的的挂在元素和数据对象data都为undefined，还未初始化。
3. 在created阶段，vue实例的数据对象data已经有了，el还没有
4. 在载入前，及beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
5. 在mounted阶段，vue实例挂载完成，data.message成功渲染。
6. 更新前/后：当data变化时，会触发beforeUpdate和updated方法
7. 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在