vue3中的生命周期

Vue 3 的生命周期是 Vue 实例从创建到销毁的全过程，这个过程可以被划分为多个阶段。每个阶段都有相应的生命周期钩子函数，开发者可以在这些钩子函数中进行相应的操作。

本页所有的 API 都应该在组件的 setup() 阶段被同步调用。在Vue.js 3中，setup 函数的引入是为了替代 Vue.js 2.x 中的beforeCreate和created 钩子函数。setup` 函数是一个新的组合式 API 的一部分，用于配置组件。

在 setup 函数中，您可以执行数据的初始化、创建响应式数据、添加监听器等操作，取代了之前在 beforeCreate 和 created 钩子中执行的工作。这样的设计使得组件配置更加清晰，并且提供了更灵活的选项。所以现在钩子函数还有：

1. onBeforeMount：
   • 作用： 在模板编译/挂载之前被调用。
   • 用途： 适合执行一些模板编译前的准备工作，如计算属性、过滤器等的初始化。
2. onMounted：
   • 作用： 在模板编译/挂载完成后被调用。
   • 用途： 常用于获取外部数据、初始化第三方库、执行动画、操作 DOM 元素等。
3. onBeforeUpdate：
   • 作用： 数据更新时被调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   • 用途： 可以在这里访问更新前的状态，执行一些更新前的逻辑，如缓存数据、计算差异等。
4. onUpdated：
   • 作用： 数据更新完成时被调用，虚拟 DOM 已经重新渲染和打补丁。
   • 用途： 常用于执行更新后的操作，如调用第三方库的方法、更新外部状态等。
5. onBeforeUnmount：
   • 作用： 在实例销毁之前被调用。
   • 用途： 适合执行一些清理操作，取消定时器、清除监听器等。
6. onUnmounted：
   • 作用： 实例被销毁时调用。
   • 用途： 常用于最终的清理工作，释放资源、取消订阅等。

除了上述提到的主要生命周期钩子函数之外，Vue3还引入了一些其他的生命周期函数，用于更细粒度地控制组件的行为。以下是一些额外的生命周期函数：

1. onErrorCaptured：
   • 作用： 当捕获一个来自子孙组件的错误时被调用。
   • 用途： 用于记录错误、发送错误报告、执行容错逻辑等。
2. onRenderTracked：
   • 作用： 当一个组件实例的渲染被 Vue 的响应式系统追踪时调用。
   • 用途： 通常用于调试或性能分析，可以在这里记录组件渲染的信息。
3. onRenderTriggered：
   • 作用： 当一个组件实例的渲染触发重新渲染时调用。
   • 用途： 与 onRenderTracked 类似，用于调试或性能分析，记录重新渲染的信息。
4. onActivated：
   • 作用： 在 keep-alive 组件被激活时调用。
   • 用途： 适合执行在组件被缓存并重新激活时需要执行的逻辑。例如，从服务器加载数据、执行动画效果等。
5. onDeactivated：
   • 作用： 在 keep-alive 组件被停用时调用。
   • 用途： 常用于执行在组件被缓存时不再需要执行的清理操作，例如清除临时状态、取消定时器等。
6. onServerPrefetch：
   • 作用： 服务端渲染时，此函数在组件被预取时调用。
   • 用途： 适合在服务器端执行一些预取数据的逻辑，以提高首屏渲染的性能。

这些额外的生命周期函数提供了更多灵活性，允许开发者在更细粒度的情境中执行自定义逻辑。在实际应用中，根据具体需求选择合适的生命周期函数来处理特定的任务。

setup() {

    // 在模板编译/挂载之前被调用
    onBeforeMount(() => {
      console.log('onBeforeMount:', this.message);
    });

    // 在模板编译/挂载完成后被调用
    onMounted(() => {
      console.log('onMounted:', this.message);
    });

    // 数据更新时被调用，发生在虚拟 DOM 重新渲染和打补丁之前
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate:', this.message);
    });

    // 数据更新完成时被调用
    onUpdated(() => {
      console.log('onUpdated:', this.message);
    });

    // 在实例销毁之前被调用
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount:', this.message);
    });

    // 实例被销毁时调用
    onUnmounted(() => {
      console.log('onUnmounted:', this.message);
    });

    // 当捕获一个来自子孙组件的错误时被调用
    onErrorCaptured((err, vm, info) => {
      console.error('onErrorCaptured:', err, info);
    });

    // 在 keep-alive 组件被激活时调用
    onActivated(() => {
      console.log('onActivated:', this.message);
    });

    // 在 keep-alive 组件被停用时调用
    onDeactivated(() => {
      console.log('onDeactivated:', this.message);
    });

    // 服务端渲染时，在组件被预取时调用
    onServerPrefetch(() => {
      console.log('onServerPrefetch:', this.message);
    });
    
}