vue3 生命周期钩子

在 Vue 3 中，可以在组件不同阶段的生命周期执行特定逻辑。
生命周期整体分为四个阶段：创建、挂载、更新、卸载。

创建阶段

setup()

• 这是组合式 API 的入口点，在组件实例创建之前被调用。
• 在此阶段，可以初始化响应式数据、定义方法等。但不能使用 this，因为它不是传统选项式 API 的上下文。
• 可以通过 import { reactive, ref } from 'vue'; 导入响应式函数来创建响应式数据。

挂载阶段

onBeforeMount()

注册一个钩子，在组件被挂载之前被调用。

• 作用
  • 通常用于在组件挂载之前进行一些初始化操作，这些操作不依赖于 DOM 元素的存在。
  • 例如，可以在这个阶段进行数据的预加载、初始化一些变量或者设置一些状态，为组件的挂载做好准备。
• 执行时机
  • 在组件的 setup 函数执行之后，以及组件真正被挂载到 DOM 之前调用。
    当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点，不能访问到 DOM 元素。它即将首次执行 DOM 渲染过程。
• 注意事项
  • 在 onBeforeMount() 阶段，组件尚未被挂载到 DOM，所以无法直接访问 DOM 元素。
• 这个钩子在服务器端渲染期间不会被调用。

onMounted()

注册一个回调函数，在组件挂载完成后执行。

• 作用
  • 主要用于在组件被渲染并插入到 DOM 后，执行一些需要访问 DOM 元素或进行依赖 DOM 操作的任务。
  • 例如，可以在这个阶段初始化第三方库、设置元素的初始状态、添加事件监听器等。
• 执行时机
  • 在组件挂载到 DOM 后调用。意味着在组件及组件的所有子组件都被挂载之后调用。可以确保在 onMounted 中访问子组件的 DOM 元素是安全的。
• 组件在以下情况下被视为已挂载：
  • 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
• 这个钩子在服务器端渲染期间不会被调用。

更新阶段

onBeforeUpdate()

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

• 作用
  • 可以在这个阶段获取到组件更新前的状态，以便进行一些特定的处理或记录。
  • 例如，可以在这个阶段保存一些当前的状态信息，以便在更新后进行比较或恢复。
• 执行时机
  • 当响应式数据发生变化，并且 Vue 检测到需要更新组件时，在实际更新之前调用onBeforeUpdate。
• 注意事项：
  • onBeforeUpdate应该快速执行，避免进行耗时的操作，因为这可能会延迟组件的更新。
  • onBeforeUpdate通常与onUpdated一起使用，以便在更新前后进行相应的处理。
• 这个钩子在服务器端渲染期间不会被调用。

onUpdated()

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
在组件更新完成后执行。

• 作用

  • 主要用于在组件的响应式数据变化导致重新渲染后执行一些操作。
  • 可以在这个阶段安全地访问和操作更新后的 DOM 元素。

• 执行时机

  • 在组件的 DOM 更新完成后调用。
  • 父组件的更新钩子将在其子组件的更新钩子之后调用。

• 注意事项：

  • 不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！
  • 如果需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 。

• 这个钩子在服务器端渲染期间不会被调用。

卸载阶段

onBeforeUnmount()

注册一个钩子，在组件实例被卸载之前调用。

• 作用

  • 主要用于在组件被销毁之前进行一些清理操作，例如取消订阅事件、清除定时器、移除 DOM 事件监听器等，以避免内存泄漏和不必要的资源占用。
  • 可以在这个阶段保存一些组件的状态信息，以便在后续可能的重新创建中恢复。

• 执行时机

  • 在组件即将被卸载，即从 DOM 中移除之前调用。此时组件的 DOM 元素仍然存在，可以被访问到。

• 注意事项：

  • 当这个钩子被调用时，组件实例依然还保有全部的功能。
  • 在onBeforeUnmount中进行清理操作时，要确保所有的资源都被正确地释放，以避免内存泄漏和其他潜在的问题。
  • 这个钩子函数应该快速执行，避免进行耗时的操作，因为这可能会延迟组件的卸载过程。

• 这个钩子在服务器端渲染期间不会被调用。