vue3生命周期详解

最新推荐文章于 2025-07-03 15:39:44 发布

谨666

最新推荐文章于 2025-07-03 15:39:44 发布

阅读量308

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_38309319/article/details/146075703

在 Vue 3 中，生命周期函数用于在组件的不同阶段执行特定的操作。Vue 3 提供了组合式 API 和选项式 API 两种方式来使用生命周期函数，下面分别进行详细介绍。

选项式 API 的生命周期函数

选项式 API 的生命周期函数与 Vue 2 的基本相似，但部分名称有所变化。以下是 Vue 3 选项式 API 中主要的生命周期函数及其详细解释

<template>
  <div>这是一个示例组件</div>
</template>

<script>
export default {
  // 组件实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
  beforeCreate() {
    console.log('beforeCreate: 此时还不能访问 data 和 methods');
  },
  // 实例已经创建完成之后被调用。在这一步，实例已经完成了数据观测 (data observer)、property 和 method 的计算、watch/event 事件回调的配置等
  created() {
    console.log('created: 可以访问 data 和 methods');
  },
  // 在挂载开始之前被调用：相关的 render 函数首次被调用
  beforeMount() {
    console.log('beforeMount: 模板编译完成，但还未挂载到页面');
  },
  // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
  mounted() {
    console.log('mounted: 组件已经挂载到页面，可以访问 DOM 元素');
  },
  // 在数据发生变化之前被调用
  beforeUpdate() {
    console.log('beforeUpdate: 数据即将更新，但 DOM 还未更新');
  },
  // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
  updated() {
    console.log('updated: 数据更新完成，DOM 已经更新');
  },
  // 在实例销毁之前调用。在这一步，实例仍然完全可用
  beforeUnmount() {
    console.log('beforeUnmount: 组件即将销毁，但仍然完全可用');
  },
  // 实例已经销毁之后调用。在这一步，所有的事件监听器和子实例都已经被销毁
  unmounted() {
    console.log('unmounted: 组件已经销毁，无法访问组件的任何属性和方法');
  },
  // 当捕获一个来自子孙组件的错误时被调用
  errorCaptured(err, vm, info) {
    console.log('errorCaptured: 捕获到子孙组件的错误', err, vm, info);
  },
  // 在渲染函数被跟踪的依赖项失效时调用
  renderTracked(event) {
    console.log('renderTracked: 渲染函数的依赖项被跟踪', event);
  },
  // 在渲染函数被跟踪的依赖项变更时调用
  renderTriggered(event) {
    console.log('renderTriggered: 渲染函数的依赖项被触发变更', event);
  },
  // 当组件实例在 keep-alive 缓存中被插入时调用
  activated() {
    console.log('activated: 组件被插入到 keep-alive 缓存中');
  },
  // 当组件实例在 keep-alive 缓存中被移除时调用
  deactivated() {
    console.log('deactivated: 组件从 keep-alive 缓存中移除');
  }
};
</script>

组合式 API 的生命周期函数

组合式 API 使用导入的函数来替代选项式 API 中的生命周期钩子。以下是对应的组合式 API 生命周期函数：

<template>
  <div>这是一个示例组件</div>
</template>

<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured, onRenderTracked, onRenderTriggered } from 'vue';

// 在挂载开始之前被调用
onBeforeMount(() => {
  console.log('onBeforeMount: 模板编译完成，但还未挂载到页面');
});

// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
onMounted(() => {
  console.log('onMounted: 组件已经挂载到页面，可以访问 DOM 元素');
});

// 在数据发生变化之前被调用
onBeforeUpdate(() => {
  console.log('onBeforeUpdate: 数据即将更新，但 DOM 还未更新');
});

// 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
onUpdated(() => {
  console.log('onUpdated: 数据更新完成，DOM 已经更新');
});

// 在实例销毁之前调用
onBeforeUnmount(() => {
  console.log('onBeforeUnmount: 组件即将销毁，但仍然完全可用');
});

// 实例已经销毁之后调用
onUnmounted(() => {
  console.log('onUnmounted: 组件已经销毁，无法访问组件的任何属性和方法');
});

// 当捕获一个来自子孙组件的错误时被调用
onErrorCaptured((err, vm, info) => {
  console.log('onErrorCaptured: 捕获到子孙组件的错误', err, vm, info);
});

// 在渲染函数被跟踪的依赖项失效时调用
onRenderTracked((event) => {
  console.log('onRenderTracked: 渲染函数的依赖项被跟踪', event);
});

// 在渲染函数被跟踪的依赖项变更时调用
onRenderTriggered((event) => {
  console.log('onRenderTriggered: 渲染函数的依赖项被触发变更', event);
});

// 当组件实例在 keep-alive 缓存中被插入时调用
onActivated(() => {
  console.log('onActivated: 组件被插入到 keep-alive 缓存中');
});

// 当组件实例在 keep-alive 缓存中被移除时调用
onDeactivated(() => {
  console.log('onDeactivated: 组件从 keep-alive 缓存中移除');
});
</script>