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

相关推荐
v:ychya201817 分钟前
独立站外贸建站公司怎么选?建站就要建营销型网站
前端·php
春涧草茶19 分钟前
慢就是快12-12手动抛出异常
java·linux·前端
三小河35 分钟前
从 Markdown 到 Generative UI:AI 如何从“生成答案”进化到“生成界面”?
前端·人工智能·后端
请为小H留灯41 分钟前
Windows 本地前端项目一键运行指南:Volta+Node+pnpm + 阿里镜像完整初始化流程
前端·pnpm·node·js
J船长1 小时前
从 App 开发到 Unity 游戏开发:建立认知地图,结合 AI 开始实践
前端
Highcharts.js1 小时前
用Highcharts开发动态主从图表|双图联动的时间序列图表示例
javascript·数据库·信息可视化·highcharts·图表开发·动态图表
牛奔1 小时前
mise 管理多版本 Go 项目
开发语言·前端·chrome·后端·golang
志尊宝2 小时前
Vue3 零基础每日笔记(076):防抖节流的正确使用——搜索框、按钮防重复提交、滚动监听
javascript·vue.js·笔记
顽疲2 小时前
从零用 Java 实现小红书 SpringBoot Vue UniApp(23)笔记话题多对多:一条笔记进多个话题池
java·vue.js·spring boot