Vue 的生命周期的理解

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

生命周期（常用）

created 和 mounted 相关

• beforeCreate ： $el 和 $data 并未初始化；
• created ：完成了 $data 初始化，$el 没有；
• beforeMount ：完成了 $el 和 $data 的初始化；
• mounted：完成了挂载。

updated 相关
$data 里的值被修改后，将会触发 updated 的操作。

Vue 生命周期的作用是什么？

Vue 生命周期中有许多个钩子，更好地控制整 Vue 实例的过程，形成好的逻辑。

btw DOM 渲染在 mounted 中就已经完成了。