vue3-生命周期
🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来vue篇专栏内容:vue3-生命周期
目录
vue3生命周期
vue3生命周期钩子
1.1 onMounted()
1.2 onUpdated()
1.3 onUnmounted()
1.4 onBeforeMount()
1.5 onBeforeUpdate()
1.6 onBeforeUnmount()
1.7 onActivated
1.8 onDeactivated
1.9 onErrorCaptured
Vue 的父子组件生命周期钩子函数执行顺序
vue3生命周期
选项式API中将 beforeDestroy 以及 destroyed 修改为 beforeUnmount 和 unmounted，其余一致
生命周期钩子 | Vue.js
如果是vue2的生命周期钩子函数 errorCaptured
完整案例： vue2.html 官方解释
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2的生命周期钩子函数</title>
</head>
<body><div id="app"><button @click="add">加1</button> {{ count }}</div>
</body>
<script src="../lib/vue.js"></script>
<script>/*** mounted ***** 数据请求，DOM操作，定时器，计时器等，实例化，订阅数据* created *** 数据请求* updated ** beforeDestroy **** 消除定时器 记时器 取消数据订阅等* */const app = new Vue({data: {count: 0},methods: {add () {this.count++if (this.count === 5) {this.$destroy()}}},beforeCreate () { // 备孕// 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用console.log('beforeCreate')},created () { // 怀上了// 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。console.log(this.$el)console.log('created')},beforeMount () {// 生下来以前// 在挂载开始之前被调用：相关的 render 函数首次被调用。console.log('beforeMount')},mounted () { // 生下了// 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。// 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。console.log(this.$el)console.log('mounted')},beforeUpdate () {// 在数据发生改变后，DOM 被更新之前被调用。// 这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。console.log('beforeUpdate')},updated () { // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。console.log('updated')},beforeDestroy () {// 实例销毁之前调用。在这一步，实例仍然完全可用。console.log('beforeDestroy')},destroyed () { // gg// 实例销毁后调用。该console.log('destroyed')}})
app.$mount('#app')
</script>
</html>vue3.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue3的生命周期钩子函数</title>
</head>
<body><div id="app"><button @click="add">加1</button> {{ count }}</div>
</body>
<script src="../lib/vue.global.js"></script>
<script>/*** mounted ***** 数据请求，DOM操作，定时器，计时器等，实例化，订阅数据* created *** 数据请求* updated ** beforeUnmount **** 消除定时器 记时器 取消数据订阅等* */const app = Vue.createApp({data () {return {count: 0}},methods: {add () {this.count++if (this.count === 5) {app.unmount()}}},beforeCreate () { // 备孕console.log('beforeCreate')},created () { // 怀上了console.log('created')},beforeMount () {// 生下来以前console.log('beforeMount')},mounted () { // 生下了console.log('mounted')},beforeUpdate () {console.log('beforeUpdate')},updated () { console.log('updated')},beforeUnmount () {console.log('beforeDestroy')},unmounted () { // ggconsole.log('destroyed')}})
app.mount('#app')
</script>
</html>
03_lifeCycle/03_lifeCycle_vue3.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue3的生命周期钩子函数</title>
</head>
<body><div id="app"><button @click="add">加1</button> {{ count }}</div>
</body>
<script src="../lib/vue.global.js"></script>
<script>/*** mounted ***** 数据请求，DOM操作，定时器，计时器等，实例化，订阅数据* created *** 数据请求* updated ** beforeUnmount **** 消除定时器 记时器 取消数据订阅等* */const { createApp, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } = Vueconst app = createApp({setup () {const count = ref(0)
onBeforeMount(() => {console.log('onBeforeMount')})
onMounted(() => {console.log('onMounted')})
onBeforeUpdate(() => {console.log('onBeforeUpdate')})
onUpdated (() => {console.log('onUpdated')})
onBeforeUnmount(() => {console.log('onBeforeUnmount')})
onUnmounted(() => {console.log('onUnmounted')})
const add = () => {count.value += 1if (count.value === 5) {app.unmount()}}
return {count, add}}})
app.mount('#app')
</script>
</html>vue3生命周期钩子
1.1 onMounted()
注册一个回调函数，在组件挂载完成后执行。
组件在以下情况下被视为已挂载：
-
其所有同步子组件都已经被挂载 (不包含异步组件或
<Suspense>树内的组件)。 -
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。
1.2 onUpdated()
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
父组件的更新钩子将在其子组件的更新钩子之后调用。
这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
1.3 onUnmounted()
注册一个回调函数，在组件实例被卸载之后调用。
一个组件在以下情况下被视为已卸载：
-
其所有子组件都已经被卸载。
-
所有相关的响应式作用 (渲染作用以及
setup()时创建的计算属性和侦听器) 都已经停止。
可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。
1.4 onBeforeMount()
注册一个钩子，在组件被挂载之前被调用。
当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
1.5 onBeforeUpdate()
注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
1.6 onBeforeUnmount()
注册一个钩子，在组件实例被卸载之前调用。
当这个钩子被调用时，组件实例依然还保有全部的功能。
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>生命周期</title>
</head>
<body><div id='app'>{{ count }}<button @click="add1">加1</button></div>
</body>
<script src='../lib/vue.global.js'></script>
<script>const { createApp, ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured} = Vueconst app = createApp({setup () {
const count = ref(0)
const add = () => {count.value++if (count.value === 5) {app.unmount()}}onErrorCaptured(() => {console.log('出错了')})onBeforeMount(() => {console.log('onBeforeMount')})onMounted(() => {console.log('onMounted')})onBeforeUpdate(() => {console.log('onBeforeUpdate')})onUpdated(() => {console.log('onUpdated')})onBeforeUnmount(() => {console.log('onBeforeUnmount')})onUnmounted(() => {console.log('onUnmounted')})
return {count,add}}})
app.mount('#app')
</script>
</html>1.7 onActivated
当包含该组件的路由被激活时调用。对应 Vue Router 的 beforeRouteEnter 导航守卫。
1.8 onDeactivated
当包含该组件的路由将要离开激活状态时调用。对应 Vue Router 的 beforeRouteLeave 导航守卫。
1.9 onErrorCaptured
注册一个钩子，在捕获了后代组件传递的错误时调用
Vue 的父子组件生命周期钩子函数执行顺序
- 加载渲染过程
父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted
- 子组件更新过程
父 beforeUpdate->子 beforeUpdate->子 updated->父 updated
- 父组件更新过程
父 beforeUpdate->父 updated
- 销毁过程
父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed
相关文章：
vue3-生命周期
🌈个人主页：前端青山 🔥系列专栏：Vue篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue3-生命周期 目录 vue3生命周期 vue3生命周期钩子 1.1 onMounted() 1.2 onUpdated() 1.3 onU…...
23. 深度学习 - 多维向量自动求导
Hi, 你好。我是茶桁。 前面几节课中，我们从最初的理解神经网络，到讲解函数，多层神经网络，拓朴排序以及自动求导。 可以说，最难的部分已经过去了，这节课到了我们来收尾的阶段，没错，生…...
挺扎心！好不容易有了一个offer，就因为背调出之前有仲裁记录，offer黄了，这已经是第二次了！...
仲裁记录会影响之后求职吗？ 最近有一位程序员向我们讲述了他的遭遇： 大环境不好，好不容易有了一个offer，却因为背调出跟之前公司有仲裁经历，offer黄了，这已经是第二次因为这个原因黄offer了。 他说自己快抑…...
【brpc学习实践四】异步请求案例详解
注意 使用的还是源码的案例，添加个人注解。在前面的篇章我们讲解了客户端、服务端rpc构造的基本流程及同步、异步的案例基础之后，再理解此案例就容易了。 想直接看案例实现请看： server端实现 client端实现 服务端要点概览 controller ser…...
git命令 cherry-pick
参考：https://blog.csdn.net/weixin_42585386/article/details/128256149 https://blog.csdn.net/weixin_44799217/article/details/128279250 merge和cherry-pick的区别： merge：是把某一个代码分支完全合并到当前的代码分支。完全合并的意…...
手动添加扩展到composer中
如果拓展包第三方没有提供composer安装方式，可以将扩展包手动添加到vendor目录下 将拓展包复制到vendor文件夹下 拓展包需要配置好composer.json文件中的autoload和包里面的命名空间 配置vendor/composer/autoload_psr4.php文件 xx\\xx\\ > array($vendorDir…...
TCP/IP
分层模型 TCP 传输控制协议 UDP 用户数据包协议 四层 应用层 负责发送/接收消息 传输层 负责拆分和组装 .期间会有编号 网络层 TCP/UDP 属于网络层, 不会判断和处理编号 数据链路层 以太网 ,网络设备 TCP 连接 TCP连接需要端口,进行通信 Java 通过Socket 接收消息 发送 …...
NX二次开发UF_CAM_set_clear_plane_data 函数介绍
文章作者：里海 来源网站：https://blog.csdn.net/WangPaiFeiXingYuan UF_CAM_set_clear_plane_data Defined in: uf_cam_planes.h int UF_CAM_set_clear_plane_data(tag_t object_tag, double origin [ 3 ] , double normal [ 3 ] ) overview 概述 De…...
如何在 ASP.NET Core 中使用 Quartz.NET
当我们在web开发中，常常会遇到这么一个需求，在后台执行某一项具体的任务，具体的说就是这些任务必须在后台定时执行。 Quartz.NET 是一个开源的 JAVA 移植版，它有着悠久的历史并且提供了强大的 Cron 表达式，这篇我们就…...
阿里云3M固定带宽服务器速度快吗？是否够用？
阿里云服务器3M带宽下载速度是384KB/秒，上传速度是1280KB/s（折合1.25M/秒），3M固定带宽够用吗？对于一般流量不是太大的个人博客、企业官网、论坛社区、小型电商网站或搭建个人学习环境或测试环境是完全够用的࿰…...
跨越行业边界，CodeMeter护航AI领域安全与合规
在人工智能（AI）技术如ChatGPT的推动下，工业视觉、医疗诊断和智能驾驶等领域正在经历重大变革。这些技术不仅扩大了应用范围，也带来了数据安全、软件授权保护和合规性等新挑战。 AI工业视觉正在推动制造和自动化的快速发展&#x…...
地磁传感器在城市交通智能监控系统的作用
地磁传感器的功能作用 地磁传感器的功能是相当强大的：当驾驶员把车辆停在车位上，地磁传感器能自动感应车辆的到来并开始计时；待车辆要离开时，传感器会自动把停车时间传送到中继站进行计费。因此，解决停车收费效率低下…...
自动解决IP冲突的问题 利用批处理更改末位IP循环+1直到网络畅通为止 解放双手 事半功倍
好久没出来写点什么了，难道今天有点时间，顺便把这两天碰到的问题出个解决方法吧。 这几天去客户那儿解决网络问题，因为客户的网络是固定的静态IP，因为没做MAC绑定，IP固定在本地电脑上，只要上不了网…...
目标检测 Faster RCNN全面解读复现
Faster RCNN 解读 经过R-CNN和Fast RCNN的积淀，Ross B. Girshick在2016年提出了新的Faster RCNN，在结构上，Faster RCNN已经将特征抽取(feature extraction)，proposal提取，bounding box regression(rect refine)&…...
HarmonyOS ArkTS 基础组件的使用（四）
1 组件介绍 组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。 组件根据功能可以分为以下五大类：…...
elasticsearch 7安装
问题提前报 max virtual memory areas error max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 如果您的环境是Linux，注意要做以下操作，否则es可能会启动失败 1 用编辑工具打开文件/etc/sysctl.conf 2 …...
opencv 存储bgr格式/同理可类推yuv
需求背景 开发rk3588 音视频硬件编解码，然后看见他的输入文件格式。。 只能是裸的文件。不能是压缩过的。就是不能是jpg/png这种格式，只能是以下的图像/视频 的存储格式.那么我没有这个格式的，以前hi3559的bgr格式和他要的也不太一致&#x…...
[架构之路-248]：目标系统 - 设计方法 - 软件工程 - 需求工程- 需求开发：如何用图形表达需求，结构化需求分析与面向对象需求分析的比较与融合
目录 前言： 一、结构化和面向对象方法上的区别 二、结构化与面向对象分析方法优缺点比较 三、结构化方法与面向对象方法的融合使用 四、结构化方法与面向对象方法的相辅相成完成软件开发 前言： 结构化软件开发方法和面向对象的软件开发方法&#x…...
[数据结构]-AVL树
前言 作者：小蜗牛向前冲 名言：我可以接受失败，但我不能接受放弃 如果觉的博主的文章还不错的话，还请点赞，收藏，关注👀支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、AVL树基…...
内存池的面试整理
文章思路来源 如何实现无锁申请？ 每个线程申请自己的TreadCacheTLS对象，来管理自己的freeList数组。小内存的大小？ 0-256K，并且对申请到的内存进行字节对齐，保证申请到的内存可以映射到对应的freeList中。映射规则&am…...
如何让旧款iPhone和iPad重获新生：终极iOS设备恢复与降级指南
如何让旧款iPhone和iPad重获新生：终极iOS设备恢复与降级指南 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to restore/downgrade, save SHSH blobs, jailbreak legacy iOS devices, and more 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit…...
仅限首批200家三级医院开放的Docker 27医疗预认证沙箱环境，已同步NMPA最新《人工智能医用软件容器化审评指导原则》——立即申请通道限时开启
更多请点击： https://intelliparadigm.com 第一章：Docker 27医疗容器合规认证的政策背景与战略意义 随着《医疗器械软件注册审查指导原则（2023修订版）》及《生成式人工智能服务管理暂行办法》的落地，国家药监局&#…...
别再只发Odometry了！ROS 2中里程计消息与TF2坐标变换的绑定发布实战
ROS 2里程计与TF2坐标变换的深度绑定实践 在机器人开发中，里程计数据是导航系统的核心输入之一。很多开发者在使用ROS 2时，虽然能够正确发布nav_msgs/Odometry消息，却经常遇到RViz显示异常或导航栈无法正常工作的问题。这通常是因为忽略了里…...
向上管理：测试从业者与技术管理者的同频共振之道
在软件研发的生态链中，测试团队是保障产品质量的关键防线，而技术经理或CTO则是把控技术方向、调配资源的核心枢纽。对测试从业者而言，能否与技术管理者同频共振，直接影响到测试工作的资源获取、目标对齐以及职业发展。然而&#x…...
OBS多平台直播插件：从零到一，掌握obs-multi-rtmp的完整使用指南
OBS多平台直播插件：从零到一，掌握obs-multi-rtmp的完整使用指南 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 在当今多平台直播时代，你是否还在为同…...
LibreVNA矢量网络分析仪深度解析：从入门到精通的全方位实战指南
LibreVNA矢量网络分析仪深度解析：从入门到精通的全方位实战指南 【免费下载链接】LibreVNA 100kHz to 6GHz 2 port USB based VNA 项目地址: https://gitcode.com/gh_mirrors/li/LibreVNA LibreVNA是一款覆盖100kHz至6GHz频率范围的开源矢量网络分析仪&#…...
QueryExcel：3分钟搞定上百个Excel文件批量查询的终极解决方案
QueryExcel：3分钟搞定上百个Excel文件批量查询的终极解决方案 【免费下载链接】QueryExcel 多Excel文件内容查询工具。 项目地址: https://gitcode.com/gh_mirrors/qu/QueryExcel 还在为海量Excel文件中的数据查找而烦恼吗？面对分散在不同文件夹中…...
免费开源桌面分区管理工具NoFences：3步快速整理Windows桌面图标
免费开源桌面分区管理工具NoFences：3步快速整理Windows桌面图标 【免费下载链接】NoFences 🚧 Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 还在为Windows桌面上杂乱无章的图标而烦恼吗&…...
如何用OpenProject开源项目管理软件提升团队协作效率
如何用OpenProject开源项目管理软件提升团队协作效率 【免费下载链接】openproject OpenProject is the leading open source project management software. 项目地址: https://gitcode.com/GitHub_Trending/op/openproject 你是否正在寻找一款功能强大且完全免费的开源…...
WarcraftHelper：让魔兽争霸3在现代电脑上流畅运行的5个关键功能
WarcraftHelper：让魔兽争霸3在现代电脑上流畅运行的5个关键功能 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为经典游戏魔兽争霸3在…...