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

相关推荐
前端加油站15 分钟前
在 cursor 成为流行的开发方式后,作为普通开发我们能做什么
前端
Cache技术分享23 分钟前
163. Java Lambda 表达式 - Function 的链式组合
前端·后端
柯南952735 分钟前
Vue 3 响应式系统源码解析
vue.js
Zestia40 分钟前
页面点击跳转源代码?——element-jumper插件实现
前端·javascript
前端小白199540 分钟前
面试取经:工程化篇-webpack性能优化之优化loader性能
前端·面试·前端工程化
PineappleCoder40 分钟前
大小写 + 标点全搞定!JS 如何精准统计单词频率?
前端·javascript·算法
zhangbao90s42 分钟前
Web组件:使用Shadow DOM
前端
hhy前端之旅42 分钟前
语义版本控制:掌握版本管理的艺术
前端
coding随想42 分钟前
深入浅出DOM操作的隐藏利器:Range(范围)对象——掌控文档的“手术刀”
前端
前端小白199543 分钟前
面试取经:工程化篇-webpack性能优化之减少模块解析
前端·面试·前端工程化