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

Vue3生命周期以及与Vue2的区别

news 来源：原创 2025/9/10 19:39:46

文章目录

一、Vue3生命周期核心阶段与钩子函数
二、Vue3生命周期示例：选项式 vs 组合式 API
- 选项式 API 示例（Vue2）
- 组合式 API 示例（Vue3）
三、Vue3与Vue2生命周期的核心差异
- 1. 钩子函数更名
- 2. 组合式 API 的影响
- 3. 新增调试钩子
- 4. 异步更新机制
四、Vue3 vs Vue2 生命周期执行顺序对比
五、最佳实践与常见问题
六、总结

一、Vue3生命周期核心阶段与钩子函数

Vue3 的生命周期分为四个主要阶段：创建、挂载、更新、销毁，每个阶段提供对应的钩子函数，允许开发者在关键节点插入逻辑。以下是各阶段的核心钩子及用途：

阶段	钩子函数	触发时机与用途
创建	setup	组合式 API 的入口，替代 Vue2 的 beforeCreate 和 created，初始化响应式数据
	onBeforeMount	组件挂载到 DOM 前，模板编译完成但未渲染
挂载	onMounted	组件已挂载到 DOM，可安全操作 DOM 或初始化第三方库（如图表）
更新	onBeforeUpdate	数据变化导致虚拟DOM更新前，可获取更新前的DOM状态（如滚动位置）
	onUpdated	数据变化后DOM已更新，需要避免在此修改数据以免循环更新
销毁	onBeforeUnmount	组件卸载前，清理定时器、事件监听等资源
	onUnmounted	组件已卸载，所有子实例和事件监听器已移除

新增调试钩子

onRenderTracked: 追踪虚拟DOM的依赖收集（首次渲染触发）
onRenderTriggerd: 追踪触发重新渲染的具体依赖（更新时触发）

二、Vue3生命周期示例：选项式 vs 组合式 API

选项式 API 示例（Vue2）

export default {data() {return { count: 0 };},created() {console.log('数据已初始化，可发起请求'); // [1,5](@ref)},mounted() {console.log('DOM 已挂载，可操作元素'); this.$refs.button.addEventListener('click', this.increment);},beforeUnmount() {this.$refs.button.removeEventListener('click', this.increment); // [9](@ref)},methods: {increment() { this.count++; }}
};

组合式 API 示例（Vue3）

import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const count = ref(0);const increment = () => { count.value++; };onMounted(() => {console.log('DOM 挂载完成'); // [4,5](@ref)document.getElementById('btn').addEventListener('click', increment);});onUnmounted(() => {document.getElementById('btn').removeEventListener('click', increment);});return { count };}
};

三、Vue3与Vue2生命周期的核心差异

1. 钩子函数更名

beforeDestroy → beforeUnmount
destroyed → unmounted

2. 组合式 API 的影响

setup 替代了 beforeCreate 和 create, 逻辑集中管理
钩子通过函数形式引入（如onMounted），提升代码复用性

3. 新增调试钩子

onRenderTracked 和 onRenderTriggered 用于性能分析

4. 异步更新机制

Vue3 的更新阶段采用异步渲染，优化性能并减少不必要的重复计算

四、Vue3 vs Vue2 生命周期执行顺序对比

以父子组件为例：

Vue2：父 created → 子 created → 子 mounted → 父 mounted。
- Vue3：父 setup → 子 setup → 父 onBeforeMount → 子 onBeforeMount → 子 onMounted → 父 onMounted

五、最佳实践与常见问题

避免在 mounted 中频繁操作 DOM，优先使用响应式数据驱动视图。
清理副作用**：在 onBeforeUnmount 中移除事件监听或定时器。
组合式 API 的优势：将相关逻辑封装为自定义 Hook（如 useFetch），提升复用性

六、总结

Vue3 的生命周期设计在兼容 Vue2 的同时，通过组合式 API 和更精确的钩子命名，提供了更灵活的代码组织方式。无论是选项式还是组合式，合理利用生命周期钩子能显著提升组件性能和可维护性。升级到 Vue3 时，建议优先采用组合式 API 以发挥其最大优势.

Vue3生命周期以及与Vue2的区别

文章目录一、Vue3生命周期核心阶段与钩子函数二、Vue3生命周期示例：选项式 vs 组合式 API选项式 API 示例（Vue2）组合式 API 示例（Vue3） 三、Vue3与Vue2生命周期的核心差异1. 钩子函数更名2. 组合式 API 的影响3. 新增…...

编程日记 2025/9/10 19:39:46

windows下安装CUDA-本地微调大模型

1、查看NVIDIA的控制面板的版本号 2 下载CUDA Toolkit https://developer.nvidia.com/cuda-toolkit-archive 这里要下载和自己电脑NVIDIA适配CUDA的大版本要保持一致选择对应的版本进行下载文件比较大，直接右键复制链接，放到迅雷中两分钟就下好了 3 …...

编程日记 2025/9/8 9:00:28

LeetCode：132. 分割回文串 II（DP Java）

目录 132. 分割回文串 II 题目描述： 实现代码与解析： DP 原理思路： 132. 分割回文串 II 题目描述： 给你一个字符串 s，请你将 s 分割成一些子串，使每个子串都是回文串。返回符合要求的最少分割次数…...

编程日记 2025/9/9 13:44:10

C# 13与.NET 9革新及工业开发应用

摘要微软推出的C# 13与.NET 9以“高效且智能”为导向，具备扩展类型、半自动属性、锁对象优化等十大革新。本文深入剖析新特性于工业级开发的应用场景，包含性能优化策略、AI集成方案以及EF Core实战技巧，为开发者提供从理论到实践的完整指引…...

编程日记 2025/9/10 19:36:13

IPoIB源码深度解析：如何基于TCP/IP协议栈实现高性能InfiniBand通信

一、IPoIB的核心设计理念 IPoIB（IP over InfiniBand）是一种在InfiniBand网络上承载IP流量的技术，其核心目标是在不修改上层应用的前提下，利用InfiniBand的高带宽和低延迟特性。与自定义协议栈不同，IPoIB通过深度集成到Linux内核TCP/IP协议栈中，将InfiniBand设备抽象为标…...

编程日记 2025/9/10 19:38:10

《白帽子讲 Web 安全：点击劫持》

目录摘要： 一、点击劫持概述二、点击劫持的实现示例：诱导用户收藏指定淘宝商品案例构建恶意页面： 设置绝对定位和z - index： 控制透明度： 三、其他相关攻击技术 3.1图片覆盖攻击与 XSIO 3.2拖拽劫持与数据…...

编程日记 2025/9/10 19:33:20

PostgreSQL10 逻辑复制实战：构建高可用数据同步架构！

PostgreSQL10 逻辑复制实战：打造高可用数据同步架构！ 概述 PostgreSQL 10 引入了逻辑复制（Logical Replication），为数据库高可用和数据同步提供了更灵活的选择。PostgreSQL 复制机制主要分为物理复制和逻辑复制两种&…...

编程日记 2025/9/10 19:37:18

Spring Boot 异步编程深入剖析

Spring Boot 异步编程深入剖析 1. 异步方法的使用原理深度解析 Spring Boot 的异步方法基于 Spring 的 AOP（面向切面编程）实现。当在方法上添加 Async 注解时，Spring 会为该方法所在的类创建一个代理对象。当调用该异步方法时&#xff0c…...

编程日记 2025/9/10 8:42:50

《动手学习深度学习》的笔记，将会持续更新。

1.什么是机器学习？机器学习是：换句话说，我们用数据训练（train）模型。数据不断的训练出比较好的模型。 1.2 机器学习的关键零件 1.学习的数据。 2. 如何转换数据的模型。 3.一个目标函数。 4.调整模型参数以优化目标函数的算法。 1，数据有什么组成？数据=样本+…...

编程日记 2025/9/10 7:01:46

[STM32]从零开始的STM32 BSRR、BRR、ODR寄存器讲解

一、前言学习STM32一阵子以后，相信大家对STM32 GPIO的控制也有一定的了解了。之前在STM32 LED的教程中也教了大家如何使用寄存器以及库函数控制STM32的引脚从而点亮一个LED，之前的寄存器只是作为一个引入，并没有深层次的讲解，在教…...

编程日记 2025/9/7 22:53:02

VUE3+Vite使用TailwindCSS【若依前后端分离框架】

参考：https://tailwind.nodejs.cn/docs/guides/vite#vue 和 https://blog.csdn.net/hjl_and_djj/article/details/144694485依次运行命令： cnpm install -D tailwindcss3.4.17 postcss autoprefixernpx tailwindcss init -p修改配置文件tailwind.config.…...

编程日记 2025/9/9 21:21:37

【Linux文件IO】系统IO详情

目录一、前言二、相关API介绍 2.1 open 2.2 read 2.3 write 2.4 lseek 2.5 close 三、简单示例 3.1 示例1 3.2 示例2 一、前言在 Linux 系统编程中，系统 I/O（又称低级 I/O）是直接通过操作系统提供的系统调用实现的文件操作接口…...

编程日记 2025/9/7 7:17:02

【弹性计算】弹性裸金属服务器和神龙虚拟化（三）：弹性裸金属技术

弹性裸金属服务器和神龙虚拟化（三）：弹性裸金属技术 1.弹性裸金属技术背景1.1 传统 KVM 虚拟化系统导致 CPU 计算特性损失1.2 传统 KVM 虚拟化系统导致资源争抢不可避免1.3 传统 KVM 虚拟化系统导致 I/O 性能瓶颈 2.弹性裸金属技术实现2.1 VPC…...

编程日记 2025/9/8 12:11:29

(贪心合并区间）leetcode 56

思路来源：代码随想录--代码随想录_合并区间题解首先用lambda 按照左界值升序排序建立答案的二维数组，将第一个行区间放入，判断从第二行开始第i行的左区间一定大于第i-1行的左区间（排序过了），所以只判断…...

编程日记 2025/9/7 17:32:51

如何理解语言模型

统计语言模型先看语言模型，语言即自然语言，模型及我们要解决的某个任务。任务一：判断哪句话出现的概率大任务二：预判空缺的位置最有可能是哪个词再看统计，统计即解决上述两个任务的解决方法。先对语句进行分词…...

编程日记 2025/9/9 18:18:20

动态规划/贪心算法

一、动态规划动态规划是一种用于解决优化问题的算法设计技术，尤其适用于具有重叠子问题和最优子结构性质的问题。它通过将复杂问题分解为更简单的子问题，并保存这些子问题的解以避免重复计算，从而提高效率。动态规划的核心思想最优子结…...

编程日记 2025/9/6 6:54:22

Hadoop简介

1. Hadoop简介官网：http://hadoop.apache.org 1.1 Hadoop架构 Hadoop由三个模块组成：分布式存储HDFS、分布式计算MapReduce、资源调度引擎YARN 1.2 Hadoop历史 Hadoop作者Doug Cutting Apache Lucene是一个文本搜索系统库 Apache Nutch作为前者的一部…...

编程日记 2025/9/9 8:59:00

Vscode 便用快捷键设置教程

文章目录简介：1. go to define (跳转到函数定义的位置)2. go to declaration (跳转到函数声明的位置)3. move line （上下移动本行代码）3.1上下复制本行代码 4. 前进和后退（就是前进到光标上一次停留的位置，和后退到那…...

编程日记 2025/9/10 10:45:53

数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（一）.创建基础表

一. 使用工具和命令 1.1 使用的工具 Navicat Premium 17 ：“Navicat”是一套可创建多个连接的数据库管理工具。 MySQL版本8.0.39 。 1.2 使用的命令 Navicat中使用的命令命令命令解释 SHOW DATABASES； 展示所有的数据库 CREATE DATABASE 数据…...

编程日记 2025/9/6 14:41:33

水滴tabbar canvas实现思路

废话不多说之间看效果图，只要解决了这个效果水滴tabbar就能做出来了源码地址一、核心实现步骤分解布局结构搭建使用作为绘制容器设置 width=600, height=200 基础尺寸通过 JS 动态计算实际尺寸（适配高清屏） function initCanvas() {// 获取设备像素比（解决 Re…...

编程日记 2025/9/1 7:07:33

windows安装vue

1、下载nodejs安装包 https://nodejs.cn/download/ 2、安装node 中途记得可以自己改安装路径，其他都是下一步 3、安装完成后检查 node -v ：查看nodejs的版本 npm -v ：查看npm的版本 4、修改npm默认安装目录与缓存日志目录的位置在nodejs目…...

编程日记 2025/9/8 21:46:46

使用3090显卡部署Wan2.1生成视频

layout: post title: 使用3090显卡部署Wan2.1生成视频 catalog: true tag: [Kubernetes, GPU, AI] 使用3090显卡部署Wan2.1生成视频 1. 环境说明2. 模型下载3. 克隆仓库4. 安装依赖5. 生成视频 5.1. 使用generate脚本生成5.2. 使用gradio启动UI界面生成 5.2.1. 启动gradio服务5…...

编程日记 2025/9/10 0:40:18

DCN讲解

DCN是DeepFM的升级版，后者是只能做二阶交叉特征，随着阶数上升，模型复杂度大幅提高，且FM网络层较浅，表达能力有限。google团队通过构建深度交叉网络来自动进行特征的高阶交叉，且时空复杂度均为线性增长&…...

编程日记 2025/9/8 12:37:52

ARM 架构下 cache 一致性问题整理

本篇文章主要整理 ARM 架构下，和 Cache 一致性相关的一些知识。本文假设读者具备一定的计算机体系结构和 Cache 相关基础知识，适合有相关背景的读者阅读 1、引言简单介绍一下 Cache 和内存之间的关系在使能 Cache 的情况下，CPU 每次获取数…...

编程日记 2025/8/16 10:34:20

算法－二分查找

二分查找其实二分查找是一个很简单理解的东西，从他的名字就可以看出，就是要分为两段去查找一个元素我们确定一个中间元素，然后将这一个元素和左边的部分和右边的部分做对比然后根据实际情况来选择一个部分来继续做这么一个步骤直到找…...

编程日记 2025/9/9 19:11:19

Python Cookbook-2.24 在 Mac OSX平台上统计PDF文档的页数

任务你的计算机运行着比较新的MacOSX系统(10.3的“Panther”或更新的版本)，现在需要知道一个 PDF 文档的页数。解决方案 PDF格式和 Python都已经集成到了Mac OsX系统中(10.3或更高版本)，因而这个问题解决起来也相对比较容易: #!/usr/bin python im…...

编程日记 2025/9/9 1:49:06

【MySQL】索引（页目录、B+树）

文章目录 1. 引入索引2. MySQL与磁盘交互的基本单位3. 索引的理解3.1 页目录3.2 B树 4. 聚簇索引、非聚簇索引5. 索引的操作5.1 索引的创建5.1.1 创建主键索引5.1.2 创建唯一索引5.1.3 普通索引的创建5.1.4 全文索引的创建 5.2 索引的查询5.3 删除索引 1. 引入索引索引&#…...

编程日记 2025/9/7 22:51:11

工业AR眼镜的‘芯’动力：FPC让制造更智能【新立电子】

随着增强现实（AR）技术的快速发展，工业AR智能眼镜也正逐步成为制造业领域的重要工具。它不仅为现场工作人员提供了视觉辅助，还极大地提升了远程协助的效率、优化了仓储管理。FPC在AI眼镜中的应用，为工业AR智能眼镜提供了…...

编程日记 2025/9/8 13:01:25

开启mysql的binlog日志

mysql版本5.7 1.查看是否开启bin_log show global variables like’log_bin’; off的话需要先开启在mysql的文件夹目录中找到my.ini 加一行log-bin“C:/ProgramData/MySQL/MySQL Server 5.7/logs/log-bin” 并提前创建好目录 2.数据库会把日志放进logs目录中 3.查看log日…...

编程日记 2025/9/10 1:41:08

SpringSecurity基于JWT实现Token的处理

前面介绍了手写单点登录和JWT的应用，本文结合SpringSecurity来介绍下在SpringBoot项目中基于SpringSecurity作为认证授权框架的情况下如何整合JWT来实现Token的处理。一、认证思路分析 SpringSecurity主要是通过过滤器来实现功能的！我们要找到SpringSecurity实现认证和校验…...

编程日记 2025/9/5 1:36:51

数据结构与算法-图论-最短路-floyd扩展

floyd和它的拓展： 在计算机科学领域，Floyd通常指Floyd Warshall算法，由罗伯特弗洛伊德（Robert W. Floyd）提出，这是一种用于在加权有向图中查找所有顶点对之间最短路径的算法。算法原理 Floyd Warsha…...

编程日记 2025/9/5 19:26:04

c++中所有构造函数的介绍与使用

C 中，构造函数是一种特殊的成员函数，用于在创建对象时对对象进行初始化。C 中有多种类型的构造函数，下面详细介绍这些构造函数及其特点和使用场景。 1. 默认构造函数定义：默认构造函数是指在没有提供任何参数的情况下可以被调用…...

编程日记 2025/9/9 18:38:45

力扣1584. 连接所有点的最小费用

力扣1584. 连接所有点的最小费用题目题目解析及思路题目要求返回最小生成树最小生成树模版题法一：prim 主要思想是每次找离树最近的顶点，将其加入树种，并更新其他所有点到该点的距离代码 class Solution { public:int minCostCo…...

编程日记 2025/9/8 17:26:18

FPGA开发，使用Deepseek V3还是R1（8）：FPGA的全流程（简略版）

以下都是Deepseek生成的答案 FPGA开发，使用Deepseek V3还是R1（1）：应用场景 FPGA开发，使用Deepseek V3还是R1（2）：V3和R1的区别 FPGA开发，使用Deepseek V3还是R1&#x…...

编程日记 2025/9/8 18:15:19

处理大数据的架构模式：Lambda 架构和 Kappa 架构

Lambda 架构和 Kappa 架构是两种用于处理大数据的架构模式，尤其在实时数据处理场景中广泛应用。 1. Lambda 架构核心思想 Lambda 架构将数据处理分为两条独立的流水线： 批处理层（Batch Layer）： 处理全量数据&…...

编程日记 2025/9/4 19:35:45

Docker网络模式实战

docker的镜像是令人称道的地方，但网络功能还是相对薄弱的部分 docker安装后会自动创建3种网络：bridge、host、none docker原生bridge网路 docker安装时会创建一个名为 docker0 的Linux bridge，新建的容器会自动桥接到这个接口 docker安装时…...

编程日记 2025/9/9 14:09:43

Linux网络基础（协议 TCP/IP 网络传输基本流程 IP VS Mac Socket编程UDP）

文章目录一.前言二.协议协议分层分层的好处 OSI七层模型TCP/IP五层(或四层)模型为什么要有TCP/IP协议TCP/IP协议与操作系统的关系(宏观上是如何实现的)什么是协议三.网络传输基本流程局域网(以太网为例)通信原理MAC地址令牌环网封装与解包分用四.IP地址IP VS Mac地址五.So…...

编程日记 2025/9/9 4:32:45

MFC: 控件根据文本内容大小自动调整

背景： 针对不同语言下，控件显示不全的现象； 例如： 现象1：中文下显示全部信息，英语下只能显示部分文字现象2：中文下显示不全## 实现思路： 控件绑定按钮计算控件文本长度根据文本长…...

编程日记 2025/9/1 11:39:28

记一次线上Tomcat服务内存溢出的问题处理

背景：JavaWeb项目部署在Tomcat服务器上，服务器用的Windows。问题表现：系统出现偶发性无法访问（隔几天就会在早上无法访问） Tomcat的日志catalina中，有如下报错信息。 java.lang.OutOfMemoryError: GC ov…...

编程日记 2025/9/7 0:30:25

go设计模式

刘：https://www.bilibili.com/video/BV1kG411g7h4 https://www.bilibili.com/video/BV1jyreYKE8z 1. 单例模式 2. 简单工厂模式代码逻辑： 原始：业务逻辑层 —> 基础类模块工厂：业务逻辑层 —> 工厂模块 —> 基础类模块…...

编程日记 2025/9/7 7:01:45

通往 AI 之路：Python 机器学习入门-语法基础

第一章 Python 语法基础 Python 是一种简单易学的编程语言，广泛用于数据分析、机器学习和人工智能领域。在学习机器学习之前，我们需要先掌握 Python 的基本语法。本章将介绍 Python 的变量与数据类型、条件语句、循环、函数以及文件操作，帮助…...

编程日记 2025/8/28 7:50:21

【再谈设计模式】备忘录模式~对象状态的守护者

一、引言在软件开发过程中，我们常常会遇到需要保存对象状态以便在之后恢复的情况。例如，在文本编辑器中，我们可能想要撤销之前的操作；在游戏中，玩家可能希望恢复到之前的某个游戏状态。备忘录模式（Memento…...

编程日记 2025/9/5 21:53:44

算法：判断链表是否有环

/*** brief 判断链表是否有环* * 该函数使用快慢指针法来判断链表中是否存在环。* 快指针每次移动两步，慢指针每次移动一步。* 如果链表中存在环，那么快指针最终会追上慢指针；* 如果链表中不存在环，快指针会先到达链表末尾。* * p…...

编程日记 2025/9/5 19:38:16

Android Logcat 高效调试指南

工具概览 Logcat 是 Android SDK 提供的命令行日志工具，支持灵活过滤、格式定制和实时监控，官方文档详见 Android Developer。基础用法命令格式 [adb] logcat [<option>] ... [<filter-spec>] ... 执行方式直接调用（通过ADB守…...

编程日记 2025/9/6 13:35:29

【数据结构与算法】Java描述：第一节：ArrayList顺序表

这篇文章我们自己实现一个顺序表， 从而更好的认识它。一、顺序表的本质顺序表的本质其实就是一个数组，但是在插入，查找与删除上，有些复杂，顺序表通过对方法进行封装，方便了使用。二、自己的顺序表 2.…...

编程日记 2025/9/9 13:43:14

报错The default superclass, “jakarta.servlet.http.HttpServlet“（已经配置好tomcat）

报错报错DescriptionResourcePathLocationType The default superclass,“jakarta.servlet.http.HttpServlet”, according to the project’s Dynamic Web Module facet version (5.0), was not found on the Java Build Path. 解决办法： 根据错误信息&#xff0…...

编程日记 2025/9/7 11:53:35

在笔记本电脑上用DeepSeek搭建个人知识库

最近DeepSeek爆火，试用DeepSeek的企业和个人越来越多。最常见的应用场景就是知识库和知识问答。所以本人也试用了一下，在笔记本电脑上部署DeepSeek并使用开源工具搭建一套知识库，实现完全在本地环境下使用本地文档搭建个人知识库。操作过程共…...

编程日记 2025/9/9 10:12:38

数学建模：MATLAB极限学习机解决回归问题

一、简述极限学习机是一种用于训练单隐层前馈神经网络的算法，由输入层、隐藏层、输出层组成。基本原理： 输入层接受传入的样本数据。在训练过程中随机生成从输入层到隐藏层的所有连接权重以及每个隐藏层神经元的偏置值，这些参数在整个…...

编程日记 2025/9/8 4:55:17

Immich自托管服务的本地化部署与随时随地安全便捷在线访问数据

文章目录前言1.关于Immich2.安装Docker3.本地部署Immich4.Immich体验5.安装cpolar内网穿透6.创建远程链接公网地址7.使用固定公网地址远程访问前言小伙伴们，你们好呀！今天要给大家揭秘一个超炫的技能——如何把自家电脑变成私人云相册，并…...

编程日记 2025/9/9 14:12:23

Python标准库【os】5 文件和目录操作2

文章目录 8 文件和目录操作8.7 浏览目录下的内容8.8 查看文件或目录的信息8.9 文件状态修改文件标志位文件权限文件所属用户和组其它 8.10 浏览Windows的驱动器、卷、挂载点8.11 系统配置信息 os模块提供了各种操作系统接口。包括环境变量、进程管理、进程调度、文件操作等方面…...

编程日记 2025/9/8 8:53:05