vue生命周期

在 Vue 3 中，生命周期钩子的名称有所变化，但它们的作用大致相同。以下是 Vue 3 的生命周期钩子及其作用：

1. beforeCreate：

   • 实例初始化之后，数据观测 (data observation) 和事件配置 (event setup) 之前调用。
   • 在这个阶段，组件实例的 data 和 methods 等尚未初始化。

2. created：

   • 实例已经创建完成，实例的数据观测和事件配置已经完成，但 DOM 还没有生成。
   • 可以在这个阶段进行一些初始数据的获取。

3. beforeMount：

   • 在挂载开始之前被调用：相关的 render 函数首次被调用。
   • 此时还未将模板编译成 HTML，DOM 结构还没有生成。

4. mounted：

   • el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
   • 可以在这个阶段访问和操作 DOM 节点。

5. beforeUpdate：

   • 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   • 可以在这个阶段进一步地更改状态，不会触发附加的重渲染过程。

6. updated：

   • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
   • 当这个钩子函数被调用时，组件 DOM 已经更新，因此可以执行依赖于 DOM 的操作。

7. beforeUnmount（Vue 2 的 beforeDestroy）：

   • 实例卸载之前调用。在这一步，实例仍然完全可用。
   • 可以在这个阶段执行一些清理工作，比如清理定时器。

8. unmounted（Vue 2 的 destroyed）：

   • Vue 实例卸载后调用。调用后，实例的所有指令都会被解绑，所有事件监听器都会被移除，所有子实例也会被销毁。
   • 通常用于卸载实例时的清理任务。

除了这些钩子，Vue 3 还引入了一些新的组合式 API (Composition API)，可以使用 setup 函数来代替某些生命周期钩子，提供更灵活的代码结构：

• setup() ：

  • 在 beforeCreate 和 created 之间调用。
  • 主要用于组合式 API 的逻辑组织。

在 Vue 3 中，可以通过 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted 等组合式 API 的生命周期钩子来注册相应的生命周期函数。这些函数与选项式 API 中的生命周期钩子功能相同，但更适合组合式 API 的使用场景