vue3 生命周期写法
时间: 2023-10-01 19:05:02 浏览: 44
在Vue 3中,生命周期的写法有所改变。下面是Vue 3中常用的生命周期函数及其对应的写法:
1. `beforeCreate` -> `setup()`:在组件实例被创建之前执行的代码可以放在 `setup()` 函数中。
2. `created` -> `setup()`:在组件实例被创建后执行的代码也可以放在 `setup()` 函数中。
3. `beforeMount` -> `onBeforeMount`:在组件挂载到DOM之前执行的代码可以放在 `onBeforeMount` 钩子函数中。
4. `mounted` -> `onMounted`:在组件挂载到DOM后执行的代码可以放在 `onMounted` 钩子函数中。
5. `beforeUpdate` -> `onBeforeUpdate`:在组件更新之前执行的代码可以放在 `onBeforeUpdate` 钩子函数中。
6. `updated` -> `onUpdated`:在组件更新后执行的代码可以放在 `onUpdated` 钩子函数中。
7. `beforeUnmount` -> `onBeforeUnmount`:在组件卸载之前执行的代码可以放在 `onBeforeUnmount` 钩子函数中。
8. `unmounted` -> `onUnmounted`:在组件卸载后执行的代码可以放在 `onUnmounted` 钩子函数中。
除了上述常用的生命周期函数外,还有其他一些钩子函数如 `onRenderTracked`、`onRenderTriggered` 等,用于性能跟踪和调试。
需要注意的是,在Vue 3中,`beforeDestroy` 和 `destroyed` 生命周期函数被废弃,可以使用 `beforeUnmount` 和 `unmounted` 替代。此外,Vue 3还引入了新的钩子函数 `onActivated` 和 `onDeactivated`,用于在组件被激活和停用时执行相应的代码。
这些新的生命周期函数的写法都遵循了Vue 3的Composition API规范,使得 Vue 组件更加灵活和易于维护。