vue3 的生命周期

Vue3 中的生命周期钩子与 Vue2 有一些变化和调整,主要有以下几个方面:

1. 组合式 API 中的生命周期钩子:

   • setup() 函数中可以使用的生命周期钩子有: onMount、onUnmount、onBeforeMount、onBeforeUnmount、onBeforeUpdate、onUpdated、onErrorCaptured、onRenderTracked、onRenderTriggered。
   • 这些钩子函数需要从 Vue 中导入使用,例如 import { onMount } from 'vue'。

2. 选项式 API 中的生命周期钩子:

   • 在选项式 API 中,生命周期钩子与 Vue2 保持一致,包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted、errorCaptured、renderTracked、renderTriggered。

3. 生命周期钩子的执行顺序:

   • 在组合式 API 中,生命周期钩子的执行顺序与选项式 API 有所不同。
   • 组合式 API 中的钩子函数会在相应的生命周期阶段被调用,而不是在组件实例化时一次性调用。

4. 新增的生命周期钩子:

   • onRenderTracked: 在组件的依赖项被追踪时触发。
   • onRenderTriggered: 在组件的重新渲染被触发时调用。
   • onErrorCaptured: 当捕获到后代组件错误时被调用。

5. 组合式 API 的使用方式:

   • 在 setup() 函数中使用生命周期钩子函数,通过 return 对象的方式将其暴露给组件模板。
   • 例如 onMount(() => { console.log('Component mounted') })。

总的来说,Vue3 中的生命周期钩子在保持 Vue2 风格的同时,也提供了更灵活、更细粒度的组合式 API 来管理组件的生命周期。开发者可以根据具体需求选择使用选项式 API 或组合式 API 的生命周期钩子。