vue3生命周期详解
在 Vue3 中,生命周期钩子函数的数量和名称都发生了变化。Vue3中有两个新的生命周期钩子函数:beforeUnmount 和 unmounted,同时将之前的 beforeCreate 和 created 合并为一个 setup 钩子函数。
下面是 Vue3 的生命周期钩子函数:
setup: 组件实例创建之初,此时组件实例已经被创建,但 data、props 等属性还未初始化。可以在该钩子函数中进行一些数据初始化操作。
beforeMount: 组件即将被挂载到 DOM 树中,此时组件的模板已经编译完成。
onMounted: 组件成功地挂载到 DOM 树中,此时可以对 DOM 进行操作。
onBeforeUpdate: 组件的数据即将更新,重新渲染前调用。
onUpdated: 组件的数据已经更新完成,DOM 已经重新渲染。
onUnmounted: 组件即将被卸载,此时可以进行一些清理工作,比如取消定时器、解绑事件等。
onErrorCaptured: 当捕获到来自子孙组件的错误时调用。
beforeUnmount: 在组件卸载之前调用,可以在这里做一些最后的清理工作。
unmounted: 组件已经被销毁,此时组件的所有内容都已经从 DOM 树中移除。
需要注意的是,在 Vue3 中,beforeCreate 和 created 钩子函数合并为了 setup,而且在 setup 函数中不能使用 this 关键字,而是采用了新的响应式 API。
import {
onMounted, onUnmounted } from 'vue';
export default {
setup() {
const message = 'Hello, Vue3!';
onMounted(() => {
console.log('mounted');
});
onUnmounted(() => {
console.log('unmounted');
});
return {
message
};
}
};
通过使用 Vue3 的生命周期钩子函数,可以更好地管理组件实例的生命周期,避免出现内存泄漏等问题。