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

vue3 生命周期函数（挂载、更新、销毁）

news 来源：原创 2025/6/30 1:37:27

在这之前，相必用户也是用过vue2的经历，所以，在讲解之前先对vue2和vue3的生命周期进行对比：

Option API组合API
beforeCreate-setup
created-setup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted
activatedonActivated

通过表格对比可以看出：

1、vue3的生命周期就是在vue2的基础上前面增加（on）

2、vue3去除创建前后生命钩子，取而代之的为setup

3、销毁变了 onUnmounted , onBeforeUnmount

使用举例：

<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
console.log('setup--创建前/后');onBeforeMount(() => {console.log('onBeforeMount--挂载前')
})
onMounted(() => {console.log('onMounted--挂载后')
})
onBeforeUpdate(() => {console.log('onBeforeUpdate--更新前')
})
onUpdated(() => {console.log('onUpdated--更新后')
})
onBeforeUnmount(() => {console.log('onBeforeUnmount--销毁前')
})
onUnmounted(() => {console.log('onUnmounted--销毁后')
})
</script>

注：在vue3中，单个页面中一个生命函数可以多次使用

相关文章：

vue3 生命周期函数（挂载、更新、销毁）

在这之前&#xff0c;相必用户也是用过vue2的经历&#xff0c;所以&#xff0c;在讲解之前先对vue2和vue3的生命周期进行对比&#xff1a; Option API组合APIbeforeCreate-setupcreated-setupbeforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpd…...

编程日记 2025/6/30 1:37:27

树莓派超全系列教程文档--(20)树莓派配置自动息屏

树莓派配置自动息屏 配置自动息屏桌面Raspberry Pi 配置CLI 控制台设置控制台模式自动息屏查看当前自动息屏设置 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置自动息屏 您可以将 Raspberry Pi 配置为在一段时间不活动后自动息屏。默认情况…...

编程日记 2025/6/30 3:36:48

基于 Qt / HTTP/JSON 的智能天气预报系统测试报告

目录 一、项目概述 1.1项目背景 1.2项目目标 二、功能需求 2.1 用户界面功能 2.2 后台功能 三、技术选择 3.1 开发框架与工具 3.2 第三方 API 四、UI设计 4.1界面展示 4.2stylesheet样式 五、代码实现 1.构造函数 2.网络请求响应处理函数 3.处理json数据 4.更新…...

编程日记 2025/6/28 1:21:49

Oracle数据库数据编程SQL＜3.7 PL/SQL 触发器(Trigger)＞

触发器是Oracle数据库中的一种特殊存储过程&#xff0c;它会在特定数据库事件发生时自动执行。触发器通常用于实现复杂的业务规则、数据验证、审计跟踪等功能。 目录 一、触发器基本概念 1. 触发器特点 2. 触发器组成要素 二、触发器类型 1. DML触发器 2. DDL触发器 3.…...

编程日记 2025/6/30 3:36:48

反常积分和定积分的应用 1

网课 还是得跟上网课的进度。但是不要给自己太大的压力。看到数学题确实有点慌张。老师为什么说写对了不要打对号&#xff0c;我感觉打对号可以给自己充足的正反馈。关键问题就是能做对的题不多。这篇笔记主要整理网课的一些笔记。网课落下的比较多&#xff0c;大概还需要补好…...

编程日记 2025/6/30 3:04:06

Day49 | 11. 盛最多水的容器、16. 最接近的三数之和、33. 搜索旋转排序数组、36. 有效的数独

11. 盛最多水的容器 题目链接&#xff1a;11. 盛最多水的容器 - 力扣&#xff08;LeetCode&#xff09; 题目难度&#xff1a;中等 代码&#xff1a; class Solution {public int maxArea(int[] height) {int i0,jheight.length-1,res0;while(i<j){resheight[i]<heig…...

编程日记 2025/6/28 1:22:06

31天Python入门——第20天:魔法方法详解

你好&#xff0c;我是安然无虞。 文章目录 魔法方法1. __new__和__del__2. __repr__和__len__3. __enter__和__exit__4. 可迭代对象和迭代器5. 中括号[]数据操作6. __getattr__、__setattr__ 和 __delattr__7. 可调用的8. 运算符 魔法方法 魔法方法: Python中的魔法方法是一类…...

编程日记 2025/6/28 1:22:29

WPF 浅述IsHitTestVisible属性

WPF 浅述IsHitTestVisible属性 IsHitTestVisible 属性是 WPF 中一个非常重要的属性&#xff0c;它决定了一个控件是否可以作为 hit test 的一部分被检测到。理解这个属性对于处理交互事件&#xff08;如鼠标点击、触摸等&#xff09;非常重要。 IsHitTestVisible 属性的含义&am…...

编程日记 2025/6/28 6:36:41

WSN 经典定位算法

WSN 经典定位算法 包括&#xff1a; Centoid, Bounding_box, Grid_Scan, RSSI, DV_hop, MDS_MAP&#xff0c;APIT-WSN Localization/Amorphous/Amorphous.m , 3351 Localization/APIT/APIT.m , 4169 Localization/APIT/PPIT.m , 3889 Localization/Bounding Box/Bounding_Box.…...

编程日记 2025/6/29 21:28:40

LLM 优化技术(1)——Scaled-Dot-Product-Attention(SDPA)

在 Transformer 中抛弃了传统的 CNN 和 RNN&#xff0c;整个网络结构完全由Scaled Dot Product Attention 和Feed Forward Neural Network组成。一个基于 Transformer 的可训练的神经网络可以通过堆叠 Transformer 的形式进行搭建&#xff0c;Attention is All You Need论文中通…...

编程日记 2025/6/28 2:26:49

【深度学习】嘿马深度学习目标检测教程第1篇：商品目标检测要求、目标,1.1 项目演示【附代码文档】

教程总体简介&#xff1a;要求 目标 1.1 项目演示 学习目标 1.1 图像识别背景 1.2 什么是目标检测 1.2.1 目标检测定义 1.2.1.1 物体 1.3 目标检测应用场景 1.3.1 行业 1.3.2 应用类别 1.4 开发环境搭建 目标检测概述 3.1 目标检测任务描述 3.1.4 目标定位的简单实现 项目实现 …...

编程日记 2025/6/28 6:51:44

【蓝桥杯】单片机设计与开发，RTC实时时钟

一、RTC-DS1302概述 二、BCD码 三、三线协议概述 四、RTC的应用 五、DS1302的驱动函数 六、操作流程 七、三线协议驱动程序...

编程日记 2025/6/28 4:53:35

Java 各版本的新特性

Java 各版本的新特性主要集中在提升开发效率、性能优化、语言功能增强和模块化支持等方面。以下是 JDK 8 到 JDK 21&#xff08;截至2023年&#xff09;的主要新特性概览&#xff1a; JDK 8 (2014) - LTS Lambda 表达式&#xff1a;支持函数式编程&#xff0c;简化匿名内部类。…...

编程日记 2025/6/28 1:21:11

OpenGL中EBO的使用及原理

EBO 是什么&#xff1f; 在OpenGL中&#xff0c;EBO&#xff08;Element Buffer Object&#xff09;&#xff0c;也称为索引缓冲对象 IBO&#xff08;Index Buffer Object&#xff09;&#xff0c;是一种用于存储顶点索引数据的缓冲区对象。它的核心作用是通过复用顶点数据来减…...

编程日记 2025/6/28 3:22:50

应用分享 | AWG技术突破：操控钻石氮空位色心，开启量子计算新篇章！

利用AWG操作钻石中的氮空位色彩中心 金刚石中的颜色中心是晶格中的缺陷&#xff0c;其中碳原子被不同种类的原子取代&#xff0c;而相邻的晶格位点则是空的。由于色心具有明亮的单光子发射和光学可触及的自旋&#xff0c;因此有望成为未来量子信息处理和量子网络的固态量子发射…...

编程日记 2025/6/28 1:22:18

【Ultralytics YOLO COCO 评估脚本 | 获得COCO评价指标】

文章目录 Ultralytics YOLO COCO 评估脚本 (coco_evaluate.py)1. 描述2. 依赖项3. 使用方法4. 输入文件格式5. 输出6. 注意7. 完整代码 Ultralytics YOLO COCO 评估脚本 (coco_evaluate.py) 这是一个 Python 脚本&#xff0c;用于评估以 COCO JSON 格式提供的目标检测结果。它…...

编程日记 2025/6/28 3:10:03

聊一聊，元件封装知多少？

目录 01 | 简 介 02 | 常见的无源器件封装 03 | 集成(IC)类封装 04 | 功率器件类封装 05 | 连接器类封装 06 | 总 结 01 | 简 介 由于平时工作中&#xff0c;经常需要查看封装的样式&#xff0c;以便初步规划PCB布局&#xff1b;遂萌发对常用的元件封装进行一次总结。 …...

编程日记 2025/6/28 6:19:40

企业需要使用防病毒系统保障数据安全的原因

数据作为企业的重要资产&#xff0c;正面临勒索病毒等极大威胁。在复杂严峻的网络安全形势下&#xff0c;企业的业务运营、数据安全和声誉遭遇诸多来自网络的挑战。2023年&#xff0c;国内发生多起严重网络安全事件&#xff0c;例如数据库漏洞导致数据泄露、钓鱼邮件窃取信息、…...

编程日记 2025/6/28 7:08:15

使用无人机进行露天矿运输道路分析

使用无人机进行露天矿运输道路分析 无人机正在彻底改变采矿业&#xff0c;为露天矿场的运输道路收集数据和分析提供了一种新方法。通过使用 UAS 技术&#xff0c;采矿公司可以更全面地了解道路状况&#xff0c;确定磨损区域&#xff0c;并提高安全性和效率。 本文介绍了无人机用…...

编程日记 2025/6/28 7:02:35

基于Vue.js网页开发相关知识：Vue-router

一、基础知识 vue-router 是 Vue.js 官方的路由管理器&#xff0c;用于实现单页面应用&#xff08;SPA&#xff09;的路由功能。以下从几个方面对 vue-router 进行详细分析&#xff1a; 1. 核心概念 路由配置 vue-router 通过定义路由配置对象来管理应用的路由。每个路由配置…...

编程日记 2025/6/28 1:22:19

同时使用Telnet和SSH登录思科交换机

同时使用Telnet和SSH登录思科交换机 1. 配置管理IP地址 首先&#xff0c;为交换机配置一个管理IP地址&#xff0c;以便可以通过网络进行远程管理&#xff1a; Switch(config)# interface vlan [VLAN_ID] Switch(config-if)# ip address [IP地址] [子网掩码] Switch(config-i…...

编程日记 2025/6/28 5:10:27

presto行转列

presto的行列转换和spark、hive一样也是通过外链语句实现的&#xff0c;只不过语法和关键子有点不同&#xff0c;如下 with tmp1 as (select 1,2,3 as a1,4,5,6 as a2 ) select * from tmp1 cross join unnest(split(tmp1.a1, ,),split(tmp1.a2, ,) ) as b(a1s,a2s) 结果如下...

编程日记 2025/6/28 5:56:56

App Usage v5.57 Pro版 追踪手机及应用使用情况

手机使用监控神器&#xff1a;让你的手机使用情况一目了然 现代人的生活已经离不开手机——通讯、娱乐、支付、购物…每天我们花在手机上的时间越来越多。你是否好奇&#xff1a; 每天在各个应用上花费了多少时间&#xff1f;一天中查看了多少次手机&#xff1f;哪些应用在后…...

编程日记 2025/6/29 2:29:20

24.3 CogView3多模态生成实战：从API调优到1024高清图像生成全解析

CogView3多模态生成实战：从API调优到1024高清图像生成全解析 CogView3 & CharGLM：多模态生成技术深度解析 关键词：CogView3 API 调用，图像生成与编辑，多模态提示工程，GLM 技术栈集成，参数优化策略 1. 智谱清言平台演示 CogView-3 核心能力 1.1 CogView3 技术架构…...

编程日记 2025/6/28 6:16:49

操作系统高频（六）linux内核

操作系统高频&#xff08;六&#xff09;linux内核 1.内核态&#xff0c;用户态的区别⭐⭐⭐ 内核态和用户态的区别主要在于权限和安全性。 权限&#xff1a;内核态拥有最高的权限&#xff0c;可以访问和执行所有的系统指令和资源&#xff0c;而用户态的权限相对较低&#x…...

编程日记 2025/6/28 6:46:50

Ubuntu系统安装Cpolar 实现内网穿透教程

文章目录 方法 1&#xff1a;使用官方脚本快速安装&#xff08;推荐&#xff09;方法 2&#xff1a;手动下载安装包配置与使用常见问题 方法 1&#xff1a;使用官方脚本快速安装&#xff08;推荐&#xff09; 下载安装脚本 打开终端&#xff0c;执行以下命令下载并运行安装脚本…...

编程日记 2025/6/28 6:52:00

Trustworthy Machine Learning

1. 可信任机器学习的核心概念 1.1 可信任性的定义 稳健性&#xff08;Robustness&#xff09;&#xff1a; 机器学习模型在面对数据噪声、分布变化或对抗性攻击时仍能维持其预测性能的能力。 公平性&#xff08;Fairness&#xff09;&#xff1a; 避免 AI 决策对某些群体存在…...

编程日记 2025/6/28 6:57:10

Enovia许可管理系统的特点

在当今竞争激烈的市场环境中&#xff0c;企业对于产品生命周期管理&#xff08;PLM&#xff09;的需求日益增加。Enovia许可管理系统&#xff0c;作为一款先进的许可证管理工具&#xff0c;凭借其卓越的特点&#xff0c;助力企业实现资源的高效管理和最大化利用。本文将详细介绍…...

编程日记 2025/6/28 3:50:21

【CSS】样式与效果

个人主页&#xff1a;Guiat 归属专栏&#xff1a;HTML CSS JavaScript 文章目录 1. CSS盒模型1.1 盒模型基础1.2 盒模型类型1.2.1 标准盒模型1.2.2 IE盒模型 2. CSS选择器2.1 基本选择器2.2 组合选择器2.3 伪类和伪元素 3. CSS布局技术3.1 Flexbox布局3.2 Grid布局3.3 定位 4. …...

编程日记 2025/6/29 7:46:13

Python中常用网络编程模块

学习籽料在下方自拿 一、网络基础 网络由下往上分为&#xff1a;物理层、数据链路层、网络怪、传输层、会话层、表示层和应用层。 TCP/IP协议是传输层协议&#xff0c;主要解决数据如何在网络中传输&#xff1b;socket则是对TCP/IP协议的封装&#xff0c;它本身不是协议&…...

编程日记 2025/6/29 16:33:09

python-flask

1.定时任务的时候一定要加--preload&#xff0c;防止 --preload gunicorn --config gunicorn-conf.py --preload index:app 2.source /usr/local/nginx/html/prod/pypd/venv/bin/activate 启动linux的python环境 3.pip freeze > requirements.txt 生成所有依赖 4.p…...

编程日记 2025/6/28 7:17:04

OpenIPC开源FPV之Adaptive-Link信号干扰

OpenIPC开源FPV之Adaptive-Link信号干扰 1. 源由2. 现象3. 分析3.1 冲突弃包3.2 传输丢包 4. 逻辑4.1 可调整参数4.2 可监测参数4.3 逻辑思路 5. 总结6. 参考资料 1. 源由 虽然&#xff0c;OpenIPC作为FPV图传在延时方面使用广播wfb-ng&#xff0c;性能上已经非常棒了。 在权…...

编程日记 2025/6/28 3:36:17

C++ 结构体与函数

一.结构体 1.概念&#xff1a; 结构体&#xff08;struct&#xff09;是一种用户自定义复合数据类型&#xff0c;其中可以包含不同类型的不同成员 2.结构体的应用场景&#xff1a; 我们在使用多个变量描述一个对象时&#xff0c;虽然也可以做到&#xff0c;但是难免显得杂乱…...

编程日记 2025/6/28 4:48:02

【Java全栈】Java + Vue 项目框架与运行流程详解

文章目录 ⭐前言⭐一、框架介绍&#x1f31f;1、后端框架&#xff08;Java Spring Boot&#xff09;&#x1f31f;2、前端框架&#xff08;Vue 3 Element Plus&#xff09; ⭐二、项目结构&#x1f31f;1、后端目录&#xff08;Spring Boot&#xff09;&#x1f31f;2、前端目…...

编程日记 2025/6/30 1:36:57

JAVA：利用 JSONPath 操作JSON数据的技术指南

1、简述 JSONPath 是一种强大的工具&#xff0c;用于查询和操作 JSON 数据。类似于 SQL 的语法&#xff0c;它为处理复杂的 JSON 数据结构提供了简单且高效的解决方案。✨ 代码样例&#xff1a;https://gitee.com/lhdxhl/springboot-example.git 本文将介绍 JSONPath 的基本…...

编程日记 2025/6/28 5:23:19

5.2.1 WPF 通过ItemControl自己做柱状图

1. 最终效果如下图&#xff1a; 1.1 准备数据 ViewModel public class PrimaryItemModel{public double Value { get; set; }public string XLabel { get; set; }}public class MainViewModel{public ObservableCollection<PrimaryItemModel> PrimaryList { get; set; }…...

编程日记 2025/6/27 13:41:22

3.31 代码随想录第三十一天打卡

1049.最后一块石头的重量II (1)题目描述: (2)解题思路: class Solution { public:int lastStoneWeightII(vector<int>& stones) {vector<int> dp(15001, 0);int sum 0;for (int i 0; i < stones.size(); i) sum stones[i];int target sum / 2;for (in…...

编程日记 2025/6/29 18:22:54

基于网启PXE服务器的批量定制系统平台

一.项目背景 公司新购了一批服务器和台式机&#xff0c;需要为台式机和服务器安装系统&#xff0c;一部分需要安装国产OpenEuler&#xff0c;一部分要求安装CentOS 7.9&#xff0c;同时也要满足定制化需求&#xff0c;即按要求分区安装相应软件。 二.项目环境 安装win10/11 …...

编程日记 2025/6/28 4:08:40

Unity光线传播体积(LPV)技术实现详解

一、LPV技术概述 光线传播体积(Light Propagation Volumes)是一种实时全局光照技术&#xff0c;通过将场景中的间接光信息存储在3D网格中&#xff0c;实现动态物体的间接光照效果。 核心优势&#xff1a; 实时性能&#xff1a;相比传统光照贴图&#xff0c;支持动态场景 硬件…...

编程日记 2025/6/29 23:00:55

蓝桥杯备考---》贪心算法之矩阵消除游戏

我们第一次想到的贪心策略一定是找出和最大的行或者列来删除&#xff0c;每次都更新行和列 比如如图这种情况&#xff0c;这种情况就不如直接删除两行的多&#xff0c;所以本贪心策略有误 so我们可以枚举选的行的情况&#xff0c;然后再贪心的选择列和最大的列来做 #include …...

编程日记 2025/6/28 1:21:24

python+playwright 学习-93 结合pands 抓取网页表格数据

playwright 结合 pands 抓取网页表格数据 pandas 直接抓取网页表格数据 web 网页表格数据 """ 上海 202501 天气抓取 """ import pandas as pddf = pd.read_html(fhttp://www.tianqihoubao.com/lishi/shanghai/month/202501.html,encoding...

编程日记 2025/6/28 7:17:20

MVC编程

MVC基本概述 例子——显示本地文件系统结构 先分别拖入ListView,TableView,TreeView 然后在进行布局 在widget.cpp 结果 mock测试 1&#xff0c;先加入json测试对象 2.创建后端目录 3&#xff0c;在src添加新文件 在models文件夹里 在mybucket.h,添加测试用例的三个字段 4.在…...

编程日记 2025/6/30 1:59:17

51单片机总结

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.03.31 51单片机学习总结&#xff08;有感而发&#xff09; 一、总结结语 一、总结 一路…...

编程日记 2025/6/28 1:21:23

端到端语音识别案例

《DeepSeek大模型高性能核心技术与多模态融合开发&#xff08;人工智能技术丛书&#xff09;》(王晓华)【摘要 书评 试读】- 京东图书 语音识别这一技术正如其名&#xff0c;是通过精密地解析说话人的语音来识别并准确转写出其所说的内容。它不仅仅是一个简单的转录过程&#…...

编程日记 2025/6/28 6:57:23

iOS自定义collection view的page size(width/height)分页效果

前言 想必大家工作中或多或少会遇到下图样式的UI需求吧 像这种cell长度不固定&#xff0c;并且还能实现的分页效果UI还是很常见的 实现 我们这里实现主要采用collection view&#xff0c;实现的方式是自定义一个UICollectionViewFlowLayout的子类&#xff0c;在这个类里对…...

编程日记 2025/6/28 6:57:25

CI/CD基础知识

什么是CI/CD CI&#xff1a;持续集成&#xff0c;开发人员频繁地将代码集成到主干&#xff08;主分支&#xff09;中每次集成都通过自动化构建和测试来验证&#xff0c;从而尽早发现集成错误&#xff0c;常用的CI工具包括Jenkins、Travis CI、CircleCI、GitLab CI等 CD&#…...

编程日记 2025/6/28 3:15:06

MySQL 的 SQL 语句执行顺序

MySQL 的 SQL 语句执行顺序并不完全按照代码的书写顺序执行&#xff0c;而是遵循一套固定的逻辑流程 1. FROM 和 JOIN 作用&#xff1a;确定查询的数据来源&#xff0c;包括表和它们的连接方式&#xff08;如 INNER JOIN, LEFT JOIN 等&#xff09;。 细节&#xff1a; 先执行…...

编程日记 2025/6/27 7:28:00

Dubbo（21）如何配置Dubbo的注册中心？

在分布式系统中&#xff0c;注册中心是一个关键组件&#xff0c;用于服务的注册和发现。Dubbo 支持多种注册中心&#xff0c;包括 ZooKeeper、Nacos、Consul、Etcd 等。下面详细介绍如何配置 Dubbo 的注册中心&#xff0c;以 ZooKeeper 为例。 配置步骤 引入依赖&#xff1a;…...

编程日记 2025/6/29 11:39:50

AISEO中的JSON 如何部署？

一、JSON 是什么&#xff1f; JSON&#xff08;JavaScript Object Notation&#xff09; 是一种轻量级的数据格式&#xff0c;用于在不同系统之间传递结构化信息。它的核心特点是&#xff1a; 易读&#xff1a;用简单的 {键: 值} 对表示数据&#xff0c;例如&#xff1a; json…...

编程日记 2025/6/28 1:22:46

力扣hot100——最长连续序列（哈希unordered_set）

题目链接&#xff1a;最长连续序列 1、错解&#xff1a;数组做哈希表&#xff08;内存超出限制&#xff09; int longestConsecutive(vector<int>& nums) {vector<bool> hash(20000000010, false);for(int i0; i<nums.size();i){hash[1000000000nums[i]]t…...

编程日记 2025/6/30 1:13:48