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组件的基本生命周期函数,在封装组价的时候,根据自己的需要,在对应的生命周期函数中

相关推荐
xiyueyezibile2 分钟前
零代码基础?AI 助你免费“搬空”语雀知识库
前端·ai编程
不会敲代码14 分钟前
React 受控组件与非受控组件完全指南
前端·react.js
不会敲代码14 分钟前
React Hooks 进阶:useRef 核心用法与受控/非受控组件实战解析
前端·react.js·面试
恋猫de小郭18 分钟前
Android 官方正式官宣 AI 支持 AppFunctions ,Android 官方 MCP 和系统级 OpenClaw 雏形
android·前端·flutter
Moment44 分钟前
一周重写 Next.js?Cloudflare 和 AI 做到了😍😍😍
前端·javascript·后端
CodeSheep1 小时前
同事去年绩效是C,提离职领导死活不让走,后来领导私下说他走了,就没人背这个绩效了
前端·后端·程序员
摸鱼的春哥2 小时前
春哥的Agent通关秘籍12:本地RAG实战(中下)向量化与落库
前端·javascript·后端
明月_清风2 小时前
毫秒级响应:前端本地搜索的“降维打击”
前端·indexeddb
摸鱼的春哥2 小时前
专家实验让AI做战争决策,AI的选择太暴力了
前端·javascript·后端
明月_清风2 小时前
存储配额:用 navigator.storage.estimate() 预判浏览器什么时候会删你的数据
前端·indexeddb