vue生命周期

Vue 的生命周期是指一个 Vue 实例从创建到销毁的过程，涉及多个阶段和对应的生命周期钩子。理解 Vue 的生命周期有助于我们在合适的时机执行特定的操作，如数据初始化、DOM 操作、事件监听、清理等。以下是 Vue 生命周期的详细描述，按顺序列出各个阶段及其生命周期钩子的作用。

Vue 生命周期的各个阶段

1. 创建阶段

   • beforeCreate ：
     在 Vue 实例被创建之前调用。此时，数据观测和事件/生命周期钩子设置尚未完成，无法访问 data、computed 等。
   • created ：
     在 Vue 实例创建完成后调用。此时，数据、计算属性、事件监听器等已初始化，可以访问实例的数据（如 data、computed 等），但此时组件还没有被挂载到 DOM 中。

2. 挂载阶段

   • beforeMount ：
     在组件挂载到 DOM 之前调用。此时，模板已编译，虚拟 DOM 已生成，但还没有挂载到实际 DOM 中。
   • mounted ：
     在组件挂载到 DOM 后调用。此时，组件的虚拟 DOM 已经被转换为实际的 DOM，并且可以访问和操作实际的 DOM 元素。适合进行 DOM 操作或第三方库的初始化。

3. 更新阶段

   • beforeUpdate ：
     当响应式数据发生变化时，组件会重新渲染。在数据变化后、DOM 更新之前调用此钩子。你可以在这里做一些数据变化前的操作。
   • updated ：
     当数据变化并且 DOM 更新后调用此钩子。此时，组件的 DOM 已经更新，适合执行与 DOM 更新相关的操作。

4. 销毁阶段

   • beforeDestroy ：
     在组件销毁之前调用。你可以在此执行清理工作，如移除事件监听器、取消定时器等。
   • destroyed ：
     在组件销毁后调用。此时，组件的数据、事件监听器和子组件都已被销毁，组件的虚拟 DOM 和实际 DOM 已被清除。

   开始创建实例=>beforeCreate=>初始化数据=>created=>编译模板，生成虚拟dom
   =>beforeMount=>虚拟dom转为真实dom,挂载dom=>mounted=>响应式数据改变,虚拟dom更新
   =>beforeUpdate=>对比新旧虚拟DOM，更新真实DOM=>updated
   =>虚拟dom销毁=>beforeDestroy=>销毁=>destroyed