Vue3生命周期函数

在 Vue 3 中,生命周期钩子函数是指组件从创建到销毁的整个过程中,Vue 自动调用的一些特定函数。它们让你能够在组件的不同阶段执行一些自定义操作。Vue 3 提供了组合式 API 和选项式 API 两种方式来定义生命周期钩子。

1. onBeforeMount (组合式 API)

  • 作用:在组件挂载之前调用(即 DOM 渲染之前)。
  • 用法:用于执行组件挂载前的准备工作。
javascript 复制代码
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('组件即将挂载');
});

2. onMounted (组合式 API)

  • 作用:组件挂载完成后调用(即 DOM 渲染完成后)。
  • 用法:可以用来执行依赖 DOM 的操作,例如获取 DOM 元素或初始化第三方库。
javascript 复制代码
import { onMounted } from 'vue';

onMounted(() => {
  console.log('组件挂载完成');
});

3. onBeforeUpdate (组合式 API)

  • 作用:在组件的响应式数据发生变化并重新渲染之前调用。
  • 用法:用于访问数据变化前的状态,可以进行一些数据预处理。
javascript 复制代码
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('组件数据更新前');
});

4. onUpdated (组合式 API)

  • 作用:在组件重新渲染后调用。
  • 用法:当组件的响应式数据更新并且 DOM 被重新渲染后,可以执行一些 DOM 操作或更新。
javascript 复制代码
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('组件更新完成');
});

5. onBeforeUnmount (组合式 API)

  • 作用:在组件销毁之前调用。
  • 用法:适用于清理操作,如移除事件监听器、取消定时器等。
javascript 复制代码
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('组件销毁前');
});

6. onUnmounted (组合式 API)

  • 作用:组件销毁后调用。
  • 用法:可以在组件销毁后进行清理工作,例如清理全局事件、取消异步请求等。
javascript 复制代码
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('组件销毁后');
});

7. onErrorCaptured (组合式 API)

  • 作用:捕获子组件中的错误并执行一些操作。
  • 用法:用于全局错误处理。
javascript 复制代码
import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.error('捕获到错误:', err);
  return false; // 继续传递错误
});

Vue 3 生命周期钩子函数(选项式 API)

除了组合式 API,Vue 3 也保留了选项式 API 中的生命周期钩子。它们的名称和 Vue 2 中类似,如下所示:

  • beforeCreate:组件实例创建之前。
  • created:组件实例创建完成后。
  • beforeMount:模板挂载之前。
  • mounted:模板挂载完成后。
  • beforeUpdate:数据发生变化之前。
  • updated:数据发生变化之后。
  • beforeDestroy:组件销毁之前。
  • destroyed:组件销毁之后。

小结

Vue 3 的生命周期钩子函数允许你在组件的不同阶段进行自定义操作,从创建到销毁,每个阶段都有其特定的钩子。通过合理使用这些钩子函数,你可以更灵活地管理组件的状态和行为。

相关推荐
牛十二10 分钟前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
whysqwhw18 分钟前
Kuikly 扩展原生 API 的完整流程
前端
whysqwhw19 分钟前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖22 分钟前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
faimi1 小时前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
coooliang2 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
程序员码歌2 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
kk不中嘞2 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
服务端技术栈2 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序