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

你可能感兴趣的:(vue,vue.js,javascript,前端)