[从零开始的 Vue3 系列]:深入解析 Vue3 的生命周期

前言 本系列将从零开始,系统性地介绍 Vue 3 的常用 API,逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示,帮助大家掌握 Vue 3 的基础与进阶知识,最终具备独立搭建完整 Vue 3 项目的能力。

vue3生命周期

Vue 3 的生命周期钩子(Lifecycle Hooks)在组件实例的不同阶段提供了灵活的控制点,开发者可以在这些钩子函数中执行相应的逻辑,如初始化数据、订阅事件、清理资源等。相比于 Vue 2,Vue 3 的生命周期函数名称做了一些修改,以更好地适应组合式 API(Composition API)

Vue 3 常见的生命周期钩子

  1. onBeforeMount - 在组件挂载之前调用。
cpp 复制代码
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
console.log('组件即将挂载');
});
  1. onMounted - 在组件挂载到 DOM 后调用。
cpp 复制代码
import { onMounted } from 'vue';

onMounted(() => {
console.log('组件已挂载');
});
  1. onBeforeUpdate - 在组件的响应式状态更新并重新渲染之前调用。
cpp 复制代码
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
console.log('组件即将更新');
});
  1. onUpdated - 在组件的 DOM 更新后调用。
cpp 复制代码
import { onUpdated } from 'vue';

onUpdated(() => {
console.log('组件已更新');
});
  1. onBeforeUnmount - 在组件卸载之前调用。
cpp 复制代码
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
console.log('组件即将卸载');
});
  1. onUnmounted - 在组件卸载之后调用。
cpp 复制代码
import { onUnmounted } from 'vue';

onUnmounted(() => {
console.log('组件已卸载');
});

这个时候就有小伙伴来问了,诶你怎么把beforeCreatecreated漏掉了呢,这里呢作者不是漏掉了,而是单独拿出来解释一下。

Vue 3 中的 beforeCreate 和 created

如果你依旧使用选项式 API(Options API),那么 beforeCreate 和 created 依然存在,可以继续使用。

  • beforeCreate - 在组件实例被创建之前调用。此时组件的实例还没有被完全初始化,响应式数据和事件监听器还没有被设置。
cpp 复制代码
export default {
  beforeCreate() {
    console.log('beforeCreate: 组件实例尚未初始化');
  },
};
  • created - 在组件实例创建完成后调用,但此时尚未挂载到 DOM 上。响应式数据已经设置完毕,实例上的 data、methods、computed 等属性都可以访问。
cpp 复制代码
export default {
  created() {
    console.log('created: 组件实例已创建,响应式数据已初始化');
  },
};

如果你使用组合式 API,setup 函数的调用时机可以视为 beforeCreate 和 created 阶段。在 setup 函数中,开发者可以做所有响应式状态的初始化工作。 使用 setup 代替 beforeCreate 和 created

cpp 复制代码
export default {
  setup() {
    console.log('setup: 组件正在创建');

    // 在 setup 中可以进行响应式数据的初始化
    const count = ref(0);

    return { count };
  },
};

这里给大家放一张官方的Vue3生命周期图片,方便大家更好的理解:

注意:vue3父子组件生命周期的执行顺序

假设有一个父组件 Parent 和一个子组件 Child,我们通过 setup 函数或选项式 API 来定义生命周期钩子。以下是父子组件的生命周期钩子执行顺序:

  • 父组件 beforeCreate
  • 父组件 created
  • 父组件 onBeforeMount
  • 子组件 beforeCreate
  • 子组件created
  • 子组件 onBeforeMount
  • 子组件 onMounted (子组件挂载完成)
  • 父组件 onMounted(父组件挂载完成)

更新时的执行顺序: 当父组件的状态更新导致子组件也需要重新渲染时,钩子的执行顺序如下:

  • 父组件 onBeforeUpdate
  • 子组件onBeforeUpdate
  • 子组件 onUpdated (子组件更新完成)
  • 父组件onUpdated (父组件更新完成)

卸载时的执行顺序 当父组件或子组件被销毁时,钩子执行顺序如下:

  1. 父组件 onBeforeUnmount
  2. 子组件 onBeforeUnmount
  3. 子组件 onUnmounted (子组件销毁完成)
  4. 父组件 onUnmounted (父组件销毁完成)

父子组件的生命周期钩子执行顺序是由外到内,再由内到外。在挂载时,父组件的 beforeCreate 和 created 先执行,然后子组件的 beforeCreate 和 created 再执行,子组件挂载后,父组件才完成挂载。同样在更新和销毁时,父组件的钩子会在子组件钩子之前触发。这种设计保证了父组件在子组件的生命周期中拥有控制权

总结:在 Vue 3 中,生命周期钩子提供了丰富的控制组件生命周期的手段,使得开发者可以在不同的阶段执行相应的逻辑操作。从组件的创建、挂载、更新到销毁,Vue 3 的生命周期函数贯穿整个组件的生命周期。组合式 API 中通过 setup 函数的引入,简化了早期生命周期钩子的使用,如 beforeCreate 和 created,让逻辑更加集中与清晰。
ps:以上内容仅为本人对 vue3生命周期的个人理解,如有不足之处,欢迎大家指正与交流,共同进步。
相关推荐
每天都要喝奶茶18 分钟前
vue3uniapp实现自定义拱形底部导航栏,解决首次闪烁问题
前端·vue.js·uni-app
Southern Wind19 分钟前
H5页面在线预览pdf
javascript·pdf
May_Xu_19 分钟前
vue3+less使用主题定制(多主题定制)可切换主题
前端·javascript·vue.js·vue·less·css3
qq_4275060819 分钟前
less解决function中return写法在浏览器被识别成Object导致样式失败的问题
前端·css·less
Elastic 中国社区官方博客25 分钟前
将你的 Kibana Dev Console 请求导出到 Python 和 JavaScript 代码
大数据·开发语言·前端·javascript·python·elasticsearch·ecmascript
闲人陈二狗36 分钟前
vue3中的pinia的使用方法
开发语言·javascript·ecmascript
北京_宏哥1 小时前
《最新出炉》系列入门篇-Python+Playwright自动化测试-41-录制视频
前端·python·测试
小华同学ai1 小时前
jsMind:炸裂项目,用JavaScript构建的思维导图库,GitHub上的热门开源项目
javascript·开源·github
小霖家的混江龙1 小时前
Vite 打包 H5 如何注入版本号
前端·vite
夏河始溢1 小时前
一七一、React性能优化方式
javascript·react.js·性能优化