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

相关推荐
PedroQue993 分钟前
uni-router v1.7.0重磅更新:守卫重定向自由掌控
前端·uni-app
Forever7_3 分钟前
尤雨溪转发:Vue-tui 0.1 发布!Vue 终于杀进终端!
vue.js
逸铭3 分钟前
Day 4:登录与 Token——桌面端怎么存密钥
前端·客户端
默_笙3 分钟前
🍞 我用 CSS 画了一个会转的 3D 立方体,同事以为我学了 Three.js(这节课真的很神奇,我很喜欢)
javascript
dkbnull4 分钟前
Vue 虚拟 DOM Diff 算法与 key 机制原理
vue.js
溯朢9 分钟前
TokUI 流式渲染的 SSE 全链路拆解
前端
京东云开发者11 分钟前
京东 Oxygen xLLM 大模型推理引擎正式捐赠开放原子开源基金会,共建国产 AI Infra 生态
前端
Csvn12 分钟前
LLM 一把梭:从 Swagger 文档到类型安全 API 请求,再也不手写接口
前端
DGT14 分钟前
深入理解 JavaScript 闭包
前端
sarasuki16 分钟前
JavaScript的对象、new的机制与原型包装类
javascript·后端