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

相关推荐
Filotimo_4 小时前
2.CSS3.(2).html
前端·css
yinuo5 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip6 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈7 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~7 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技017 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio8 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫9 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@9 小时前
前端发送请求时,参数的传递格式
前端
L李什么李9 小时前
HTML——使用表格制作简历
前端·javascript·html