vue 的生命周期函数

Vue 生命周期函数（生命周期钩子）是 Vue 实例从创建到销毁过程中，不同阶段所触发的特定函数。理解这些生命周期函数对于开发 Vue 应用至关重要，因为它们让你在不同的生命周期阶段执行代码，比如数据初始化、DOM 渲染完成、组件销毁等。

Vue 生命周期的 4 个主要阶段

1. 创建阶段（Creation Phase）
2. 挂载阶段（Mounting Phase）
3. 更新阶段（Updating Phase）
4. 销毁阶段（Unmounting Phase）

每个阶段有特定的生命周期函数，我们可以在这些函数中执行自定义操作。以下是常见的 Vue 生命周期函数：

1. 创建阶段（Creation Phase）

• beforeCreate
  在 Vue 实例初始化之后，数据观测 (data) 和事件/侦听器 (events/watcher) 设置之前调用。此时无法访问 data、computed、methods 等属性。

  • 使用场景：通常不常用，因为此时实例还未准备好。

• created
  Vue 实例被创建后，data、computed 和 methods 等已设置完成，但 DOM 还没有渲染。此时可以访问到数据和事件监听器，通常用来进行初始化操作（如异步请求数据）。

  • 使用场景：适合做数据请求、事件监听器的绑定等。

2. 挂载阶段（Mounting Phase）

• beforeMount
  在挂载开始之前调用，相关的 render 函数首次被调用，但 DOM 元素还没有挂载。

  • 使用场景：通常不需要使用，除非需要做一些特定的挂载前操作。

• mounted
  在挂载完成后调用，el 被新创建的 vm.$el 替代。此时所有的 data 和 computed 已经绑定到 DOM，DOM 可以安全地访问了。

  • 使用场景：适合进行 DOM 操作、依赖于 DOM 的初始化等。

3. 更新阶段（Updating Phase）

• beforeUpdate
  在数据更改之后，DOM 更新之前调用。此时你可以访问到旧的数据和 DOM，但新的数据和视图还未更新。

  • 使用场景：可以进行一些操作，计算新旧数据变化的差异，或准备更新前的逻辑。

• updated
  在数据更新并且视图重新渲染之后调用。此时可以访问到更新后的 DOM。

  • 使用场景：适合进行视图更新后的操作，避免直接修改数据，因为此时数据已经更新。

4. 销毁阶段（Unmounting Phase）

• beforeDestroy
  在实例销毁之前调用。在这时，实例仍然是完全可用的，但组件的所有事件监听器、子组件实例等还未销毁。

  • 使用场景：适合清理定时器、取消网络请求、移除事件监听等操作。

• destroyed
  实例销毁后调用。此时，所有的事件监听器和子组件的实例都被销毁。

  • 使用场景：适合进行销毁后的清理工作。

生命周期示意图

beforeCreate   -->   created   -->   beforeMount   -->   mounted   -->   beforeUpdate   -->   updated   -->   beforeDestroy   -->   destroyed

每个生命周期钩子的作用

生命周期钩子	说明	使用场景
beforeCreate	实例初始化时调用，数据观测、事件监听器未设置	初始化设置，初始化数据不完全时不常用。
created	实例创建后调用，可以访问 data 和 methods，但未挂载到 DOM	数据请求、初始化逻辑、订阅事件等。
beforeMount	在挂载开始之前调用，el 未插入 DOM	通常不需要使用，除非需要在挂载前做准备工作。
mounted	挂载完成后调用，DOM 渲染完成，可以进行 DOM 操作	访问 DOM 进行 DOM 操作，数据绑定完成。
beforeUpdate	数据更新前调用，DOM 更新前	更新前的数据和视图比较，准备更新的操作。
updated	数据更新后调用，DOM 渲染后	数据更新后的 DOM 操作，避免直接修改数据。
beforeDestroy	实例销毁前调用，销毁前仍可访问实例。	清理定时器、网络请求、事件监听等资源。
destroyed	实例销毁后调用，销毁时实例的所有事件监听器和子组件实例也销毁。	销毁后清理工作，如移除事件监听器等。

总结

Vue 的生命周期函数可以帮助开发者在组件的不同阶段执行特定的逻辑，保证在正确的时间做合适的事情。常用的生命周期函数包括 created、mounted、updated 和 destroyed，它们提供了对数据变化、DOM 操作和组件销毁时的控制能力。

理解并善用这些生命周期钩子，可以让你在开发过程中更加高效、灵活地处理组件的状态和行为。