当前位置：首页 > news >正文

vue3-生命周期

news 2026/2/14 19:22:55

🌈个人主页：前端青山
🔥系列专栏：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…...

编程日记 2023/11/23 9:48:26

23. 深度学习 - 多维向量自动求导

Hi, 你好。我是茶桁。前面几节课中，我们从最初的理解神经网络，到讲解函数，多层神经网络，拓朴排序以及自动求导。可以说，最难的部分已经过去了，这节课到了我们来收尾的阶段，没错，生…...

编程日记 2023/11/23 9:47:24

挺扎心！好不容易有了一个offer，就因为背调出之前有仲裁记录，offer黄了，这已经是第二次了！...

仲裁记录会影响之后求职吗？ 最近有一位程序员向我们讲述了他的遭遇： 大环境不好，好不容易有了一个offer，却因为背调出跟之前公司有仲裁经历，offer黄了，这已经是第二次因为这个原因黄offer了。他说自己快抑…...

编程日记 2023/11/23 9:46:23

【brpc学习实践四】异步请求案例详解

注意使用的还是源码的案例，添加个人注解。在前面的篇章我们讲解了客户端、服务端rpc构造的基本流程及同步、异步的案例基础之后，再理解此案例就容易了。想直接看案例实现请看： server端实现 client端实现服务端要点概览 controller ser…...

编程日记 2023/11/23 9:45:22

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：是把某一个代码分支完全合并到当前的代码分支。完全合并的意…...

编程日记 2023/11/23 9:44:21

手动添加扩展到composer中

如果拓展包第三方没有提供composer安装方式，可以将扩展包手动添加到vendor目录下将拓展包复制到vendor文件夹下拓展包需要配置好composer.json文件中的autoload和包里面的命名空间配置vendor/composer/autoload_psr4.php文件 xx\\xx\\ > array($vendorDir…...

编程日记 2023/11/23 9:43:20

TCP/IP

分层模型 TCP 传输控制协议 UDP 用户数据包协议四层应用层负责发送/接收消息传输层负责拆分和组装 .期间会有编号网络层 TCP/UDP 属于网络层, 不会判断和处理编号数据链路层以太网 ,网络设备 TCP 连接 TCP连接需要端口,进行通信 Java 通过Socket 接收消息发送 …...

编程日记 2023/11/23 9:42:19

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…...

编程日记 2023/11/23 9:41:18

如何在 ASP.NET Core 中使用 Quartz.NET

当我们在web开发中，常常会遇到这么一个需求，在后台执行某一项具体的任务，具体的说就是这些任务必须在后台定时执行。 Quartz.NET 是一个开源的 JAVA 移植版，它有着悠久的历史并且提供了强大的 Cron 表达式，这篇我们就…...

编程日记 2023/11/23 9:40:17

阿里云3M固定带宽服务器速度快吗？是否够用？

阿里云服务器3M带宽下载速度是384KB/秒，上传速度是1280KB/s（折合1.25M/秒），3M固定带宽够用吗？对于一般流量不是太大的个人博客、企业官网、论坛社区、小型电商网站或搭建个人学习环境或测试环境是完全够用的&#xff0…...

编程日记 2023/11/23 9:39:16

跨越行业边界，CodeMeter护航AI领域安全与合规

在人工智能（AI）技术如ChatGPT的推动下，工业视觉、医疗诊断和智能驾驶等领域正在经历重大变革。这些技术不仅扩大了应用范围，也带来了数据安全、软件授权保护和合规性等新挑战。 AI工业视觉正在推动制造和自动化的快速发展&#x…...

编程日记 2023/11/23 9:37:14

地磁传感器在城市交通智能监控系统的作用

地磁传感器的功能作用地磁传感器的功能是相当强大的：当驾驶员把车辆停在车位上，地磁传感器能自动感应车辆的到来并开始计时；待车辆要离开时，传感器会自动把停车时间传送到中继站进行计费。因此，解决停车收费效率低下…...

编程日记 2023/11/23 9:36:13

自动解决IP冲突的问题利用批处理更改末位IP循环+1直到网络畅通为止解放双手事半功倍

好久没出来写点什么了，难道今天有点时间，顺便把这两天碰到的问题出个解决方法吧。这几天去客户那儿解决网络问题，因为客户的网络是固定的静态IP，因为没做MAC绑定，IP固定在本地电脑上，只要上不了网&#xf…...

编程日记 2023/11/23 9:34:11

目标检测 Faster RCNN全面解读复现

Faster RCNN 解读经过R-CNN和Fast RCNN的积淀，Ross B. Girshick在2016年提出了新的Faster RCNN，在结构上，Faster RCNN已经将特征抽取(feature extraction)，proposal提取，bounding box regression(rect refine)&…...

编程日记 2023/11/23 9:33:10

HarmonyOS ArkTS 基础组件的使用（四）

1 组件介绍组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：…...

编程日记 2023/11/23 9:32:06

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 …...

编程日记 2023/11/23 9:31:06

opencv 存储bgr格式/同理可类推yuv

需求背景开发rk3588 音视频硬件编解码，然后看见他的输入文件格式。。只能是裸的文件。不能是压缩过的。就是不能是jpg/png这种格式，只能是以下的图像/视频的存储格式.那么我没有这个格式的，以前hi3559的bgr格式和他要的也不太一致&#x…...

编程日记 2023/11/23 9:30:04

[架构之路-248]：目标系统 - 设计方法 - 软件工程 - 需求工程- 需求开发：如何用图形表达需求，结构化需求分析与面向对象需求分析的比较与融合

目录前言： 一、结构化和面向对象方法上的区别二、结构化与面向对象分析方法优缺点比较三、结构化方法与面向对象方法的融合使用四、结构化方法与面向对象方法的相辅相成完成软件开发前言： 结构化软件开发方法和面向对象的软件开发方法&#x…...

编程日记 2023/11/23 9:29:03

[数据结构]-AVL树

前言作者：小蜗牛向前冲名言：我可以接受失败，但我不能接受放弃如果觉的博主的文章还不错的话，还请点赞，收藏，关注👀支持博主。如果发现有问题的地方欢迎❀大家在评论区指正目录一、AVL树基…...

编程日记 2023/11/23 9:28:02

内存池的面试整理

文章思路来源如何实现无锁申请？ 每个线程申请自己的TreadCacheTLS对象，来管理自己的freeList数组。小内存的大小？ 0-256K，并且对申请到的内存进行字节对齐，保证申请到的内存可以映射到对应的freeList中。映射规则&am…...

编程日记 2023/11/23 9:27:01

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2026/2/12 14:29:37

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录一、SQL注入二、insert注入三、报错型注入四、updatexml函数五、源码审计六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

ip子接口配置及删除

配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...

编程新知 2026/2/8 22:07:52

C++使用 new 来创建动态数组

问题： 不能使用变量定义数组大小原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/9 23:40:53

基于SpringBoot在线拍卖系统的设计和实现

摘要随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2026/2/13 13:03:27

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）专栏介绍：《编程项目实战》目录一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...

编程新知 2026/1/31 4:37:40

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 的父子组件生命周期钩子函数执行顺序​

相关文章：

Vue 的父子组件生命周期钩子函数执行顺序