前端面试题（四）：Vue2的生命周期

Vue 2 中的生命周期分为多个阶段，每个阶段都有相应的生命周期钩子（Hooks）来处理组件在不同阶段的逻辑。以下是 Vue 2 的各个生命周期钩子函数及其触发时机：

1. 创建阶段 (Creation)

• beforeCreate:

  • 这个钩子在 Vue 实例被初始化之后、数据观测和事件/侦听器设置之前调用。
  • 不能访问 data、computed、methods 等数据和事件。

• created:

  • 在实例创建完成后立即调用。此时，数据已观测，事件已设置，但 DOM 还未挂载。
  • 可以访问 data、computed、methods 等属性。

2. 挂载阶段 (Mounting)

• beforeMount:

  • 在挂载开始之前调用，相关的 render 函数首次被调用。
  • 可以在这个阶段做一些初始化的操作，但还无法访问到实际的 DOM。

• mounted:

  • 在 DOM 挂载完成后调用。此时，所有的模板、组件已经插入到 DOM 中。
  • 可以在这个钩子中访问和操作真实的 DOM 元素，进行一些依赖于 DOM 的操作。

3. 更新阶段 (Updating)

• beforeUpdate:

  • 在数据更新时调用，数据变动后，虚拟 DOM 会重新渲染和打补丁前执行此钩子。
  • 可以在这个钩子中进行某些操作，但你不能改变数据（避免无限循环）。

• updated:

  • 数据更新后，虚拟 DOM 被重新渲染并打补丁后调用。此时，视图已更新。
  • 可以在这个钩子中访问和操作更新后的 DOM，但此时不会再次触发渲染。

4. 销毁阶段 (Destruction)

• beforeDestroy:

  • 在组件销毁之前调用。此时，实例仍然是有效的，可以进行清理工作，如取消定时器、注销事件监听等。

• destroyed:

  • 组件销毁后调用。此时，Vue 实例已经完全销毁，数据、事件监听、子组件等都已经被清除，无法再进行任何操作。

5. 错误处理钩子 (Error Handling)

• errorCaptured:
  • 捕获来自子组件的错误，并阻止错误进一步传播。这个钩子只会在错误发生在子组件时被触发。

总结

生命周期钩子	调用时机
beforeCreate	实例初始化之后，数据观测和事件/侦听器设置之前。
created	实例创建完成，数据已观测，事件已设置，但 DOM 尚未挂载。
beforeMount	挂载开始之前，render 函数首次被调用。
mounted	DOM 挂载完成后，实例和 DOM 关联完毕，可以访问到真实 DOM。
beforeUpdate	数据变化前，虚拟 DOM 更新前。
updated	数据变化后，虚拟 DOM 更新完成，视图已更新。
beforeDestroy	组件销毁之前，清理工作。
destroyed	组件销毁之后，实例和数据已销毁。
errorCaptured	捕获并处理子组件的错误。

这些生命周期钩子函数为开发者提供了丰富的操作时机，可以根据需求进行相应的逻辑处理。