12、Vue 生命周期各阶段及任务

Vue 2 生命周期各阶段及任务

创建阶段

• beforeCreate
  • 此时实例刚刚初始化，数据观测（data）和 event/watcher 事件配置还未开始。
  • 通常在此阶段无法访问 data 中的数据和 methods 中的方法。
  • 可以进行一些与 Vue 实例无关的全局初始化操作，比如设置全局的加载状态。
• created
  • 实例已经完成了数据观测、property 和 method 的计算、watch/event 事件回调的配置。
  • 可以访问 data 中的数据和 methods 中的方法。
  • 适合进行数据的初始化，如发送异步请求获取初始数据。

挂载阶段

• beforeMount
  • 相关的 render 函数首次被调用，模板已经编译完成，但还未挂载到 DOM 上。
  • 此时可以对即将挂载的 DOM 进行一些预处理操作，比如修改一些与 DOM 结构相关的配置。
• mounted
  • 实例已经挂载到 DOM 上，此时可以访问到真实的 DOM 元素。
  • 常用于进行一些依赖于 DOM 的操作，如初始化第三方插件（如 Chart.js 绘制图表）、绑定 DOM 事件等。

更新阶段

• beforeUpdate
  • 当响应式数据发生变化时，在 DOM 重新渲染之前调用。
  • 可以在这个阶段保留旧的 DOM 状态，或者进行一些数据更新前的准备工作。
• updated
  • 响应式数据发生变化，DOM 重新渲染完成后调用。
  • 可用于在更新后执行一些操作，如更新后的 DOM 计算、动画效果等。

销毁阶段

• beforeDestroy
  • 在实例销毁之前调用，此时实例仍然完全可用。
  • 常用于清理定时器、取消网络请求、解绑自定义事件等，防止内存泄漏。
• destroyed
  • 实例已经销毁，所有的事件监听器和子实例都已经被销毁。
  • 通常不需要在这个阶段进行额外的操作。

特殊情况

• activated
  • 当组件被 keep-alive 缓存且激活时调用。
  • 可以在此阶段恢复组件的状态，如重新加载数据。
• deactivated
  • 当组件被 keep-alive 缓存且停用时调用。
  • 可用于保存组件的当前状态，或者清理一些临时数据。
• errorCaptured
  • 当捕获到子孙组件抛出的错误时调用。
  • 可以进行全局的错误处理，如记录错误日志、显示错误提示等。

Vue 3 生命周期各阶段及任务

Vue 3 引入了组合式 API，生命周期钩子的使用方式有所变化，但功能基本一致。

创建阶段

• setup()
  • 虽然不算严格意义上的生命周期钩子，但它是组合式 API 的入口，在 beforeCreate 和 created 之前执行。
  • 用于初始化数据和方法，返回的数据和方法可以在模板中使用。

挂载阶段

• onBeforeMount
  • 与 Vue 2 的 beforeMount 功能相同，在组件挂载开始之前调用。
• onMounted
  • 与 Vue 2 的 mounted 功能相同，在组件挂载到 DOM 后调用。

更新阶段

• onBeforeUpdate
  • 与 Vue 2 的 beforeUpdate 功能相同，在数据变化且 DOM 更新前调用。
• onUpdated
  • 与 Vue 2 的 updated 功能相同，在数据变化且 DOM 更新后调用。

销毁阶段

• onBeforeUnmount
  • 与 Vue 2 的 beforeDestroy 功能相同，在实例销毁前调用，名称更符合语义。
• onUnmounted
  • 与 Vue 2 的 destroyed 功能相同，在实例销毁后调用，名称更符合语义。

特殊情况

• onActivated
  • 与 Vue 2 的 activated 功能相同，用于 keep-alive 缓存的组件激活时调用。
• onDeactivated
  • 与 Vue 2 的 deactivated 功能相同，用于 keep-alive 缓存的组件停用时调用。
• onErrorCaptured
  • 与 Vue 2 的 errorCaptured 功能相同，用于捕获子孙组件抛出的错误。

此外，Vue 3 还提供了 onRenderTracked 和 onRenderTriggered 用于调试，分别在响应式依赖被追踪和触发重新渲染时调用。