Vue3:组件的生命周期函数

这一篇博客是结合官网完档和书籍后整理的,会很简单,可能对很对朋友都没有任何的帮助,这只是我对自己的学习vue这个技术栈的笔记。

onMounted

注册一个会调用函数,在组件挂载完成后执行。

那么vue组件在什么情况下,算是已经挂载了呢?

  1. 所有同步的子组件都已经被挂载;
  2. 自身的DOM树已经创建完成并且插入父容器中。

这个时候,组件算是挂载完成,就可以在这个生命周期函数中执行其他的逻辑了。

onUpdated()

在组件DOM更新后调用,导致组件更新的原因是组件相关的状态变更,所以不要在onUpdated函数中更改组件状态,否则会引起组件无限循环更新。

其他生命周期函数:

  1. onBeforeUpdate(),在组件更新自身DOM之前调用
  2. onUnmounted(),组件卸载后调用。
  3. onBeforeUnmount(),在组件卸载之前调用。
  4. onBeforeMount(),组件卸载之前调用。
  5. onErrorCaptured(),在捕获后代组件传递的错误时调用。错误可以从这个来源中捕获:组件渲染、事件处理器、生命周期函数、setup函数、侦听器、自定义指令钩子和过渡钩子
  6. onActivated(),如果组件是缓存树中的一部分,当组件插到DOM的时候被调用。属于缓存实例的生命周期函数。
  7. onDeactivated(),如果组件是缓存树中的一部分,当组件从DOM中移除的时候调用。

这是vue组件的基本生命周期函数,在封装组价的时候,根据自己的需要,在对应的生命周期函数中

相关推荐
江华森1 分钟前
Tomcat 10 实战部署指南:从零到生产级 Web 容器
java·前端·tomcat
chushiyunen4 分钟前
vue插件element ui,element plus,ElMessage消息框,ref,动态绑定语法
vue.js·ui·elementui
放下华子我只抽RuiKe57 分钟前
FastAPI 全栈后端(五):后台任务与消息队列
前端·javascript·react.js·ai·前端框架·fastapi·ai编程
丷丩7 分钟前
MapLibre GL JS第44课:生成并添加缺失图标
前端·javascript·gis·mapblibre gl js
snow@li13 分钟前
前端:下拉框里边的数据叫啥 / 怎么称呼
前端
禁默28 分钟前
数字人切入,我用魔珐星云搭建政务大厅咨询数字人,低成本落地便民接待
前端·人工智能·政务
小二·32 分钟前
React 18 新特性与 Hooks 进阶实战
前端·react.js·前端框架
GoogleDocs33 分钟前
ProbeKit Lite 是什么?一款用于检测 AI 中转站真实度的工具
javascript·人工智障
li-xun34 分钟前
2026年6月10日博客精选
javascript·人工智能·ui
Shadow(⊙o⊙)34 分钟前
QT常用控件3.0,font字体设置,toolTip提示,focusPolicy焦点定位原则,中型控件StyleSheet样式表。
服务器·开发语言·前端·c++·qt