vue3生命周期详解

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 的生命周期钩子函数，可以更好地管理组件实例的生命周期，避免出现内存泄漏等问题。