Vue 3中一些常见的生命周期钩子及其用途

1. setup():

   • 这不是一个生命周期钩子，而是一个新引入的函数，它是组合式 API 的入口点。
   • setup函数在组件创建之前执行，此时组件的属性props被解析，并且这是定义响应式状态和函数的地方。

2. onBeforeMount():

   • 在挂载（mount）组件到DOM之前调用。

3. onMounted():

   • 在组件挂载到DOM后调用，此时你可以访问到DOM元素，并且可以执行DOM相关的操作。

4. onBeforeUpdate():

   • 在响应式数据发生变化，并且DOM重新渲染之前调用。

5. onUpdated():

   • 在组件更新后调用，当新的DOM已经渲染成效后。

6. onBeforeUnmount():

   • 在卸载组件之前调用，你可以在这里执行清理工作，如移除事件监听器。

7. onUnmounted():

   • 在组件完全卸载后调用。

8. onActivated() 和 onDeactivated():

   • 这两个钩子用于<keep-alive>包裹的组件，在组件被激活或停用时调用。

9. onErrorCaptured() 和 onRenderTracked() 和 onRenderTriggered():

   • 这些高级钩子分别用于错误捕获和调试，它们在特定情况下会被调用。

在Composition API中，这些生命周期钩子都是通过从vue导入的函数来使用的，例如：

import { onMounted, onUpdated } from 'vue';

setup() {
  onMounted(() => {
    console.log('Component is mounted!');
  });

  onUpdated(() => {
    console.log('Component is updated!');
  });

  // ... 其他逻辑
}