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

Vue2 vs Vue3 生命周期全面对比：created 的进化与革新！！！

news 来源：原创 2025/7/1 8:36:13

🎯 Vue2 vs Vue3 生命周期全面对比：`created` 的进化与革新

🔥 核心差异全景图

在这里插入图片描述

一、钩子函数命名与定位变化

1. 命名规范革新

Vue2 钩子	Vue3 钩子 (Options API)	Vue3 Composition API
`beforeCreate`	❌ 无	`setup()` 替代
`created`	✅ 保留	`setup()` 替代
`beforeDestroy`	`beforeUnmount`	`onBeforeUnmount`
`destroyed`	`unmounted`	`onUnmounted`

关键变化解读：
• 语义优化：Vue3 将 destroyed 改为 unmounted，更精准描述组件卸载行为
• 命名统一：所有钩子前缀改为 on，如 onMounted

2. `created` 的定位迁移

• Vue2 的 created：

export default {created() {console.log('响应式数据已就绪:', this.message) // ✅ 可访问 datathis.fetchData() // 典型异步请求场景}
}

• Vue3 的替代方案：

import { ref } from 'vue'
export default {setup() {const message = ref('')// 🔥 直接执行相当于 createdconsole.log('响应式数据已就绪:', message.value)fetchData() // 无需通过 this 访问return { message }}
}

二、执行机制与阶段差异

1. 生命周期阶段对比

• Vue2 顺序：

父 beforeCreate → 父 created → 父 beforeMount  
→ 子 beforeCreate → 子 created → 子 beforeMount → 子 mounted  
→ 父 mounted

• Vue3 特性：
• 异步挂载优化：通过 <Suspense> 实现异步组件加载
• 组合式逻辑聚合：setup() 合并了 beforeCreate 和 created 阶段

2. 调试能力增强

Vue3 新增开发模式专用钩子：

import { onRenderTracked, onRenderTriggered } from 'vue'setup() {onRenderTracked((e) => {console.log('依赖追踪:', e) // 响应式依赖收集过程})onRenderTriggered((e) => {console.log('触发更新:', e) // 数据变更触发重新渲染})
}

三、性能优化与破坏性变更

1. 销毁阶段内存管理

操作类型	Vue2 方案	Vue3 优化方案
定时器清理	`beforeDestroy`	`onBeforeUnmount`
事件解绑	`destroyed`	`onUnmounted`
第三方库释放	手动调用销毁方法	结合 `watchEffect` 自动清理

代码示例：

// Vue3 自动清理示例
setup() {const timer = ref(null)watchEffect((onInvalidate) => {timer.value = setInterval(() => {}, 1000)onInvalidate(() => clearInterval(timer.value)) // 自动销毁})
}

2. 异步更新机制

Vue3 采用 Proxy 实现响应式，优化更新性能：
• 批量更新：多个数据变更合并为单次渲染
• Tree-shaking 支持：未使用的生命周期钩子不会打包

四、迁移适配指南

1. 代码改造策略

场景	Vue2 写法	Vue3 适配方案
数据初始化	`created()` 中赋值	`setup()` 直接声明响应式变量
全局事件总线	`EventBus.$on`	使用 `provide/inject` 或 Pinia
DOM 操作	`mounted()` 访问 `$el`	`onMounted()` + `ref` 引用

2. 常见问题避坑

this 丢失问题：
Composition API 中不再通过 this 访问实例，需用 getCurrentInstance()
异步请求竞态：
使用 AbortController 或 watchEffect 自动取消
插件兼容性：
检查第三方库是否支持 Vue3 的 app.use() 注册方式

五、总结：技术选型建议

新项目：
• 首选 Vue3 Composition API，利用 setup() 的代码组织优势
• 搭配 <script setup> 语法糖提升开发体验
旧项目维护：
• 渐进式迁移：单个组件改用 @vue/compat 兼容模式
• 优先重构高频修改的组件

Vue2 vs Vue3 生命周期全面对比：created 的进化与革新！！！

🎯 Vue2 vs Vue3 生命周期全面对比：created 的进化与革新 🔥 核心差异全景图一、钩子函数命名与定位变化 1. 命名规范革新 Vue2 钩子Vue3 钩子 (Options API)Vue3 Composition APIbeforeCreate❌ 无setup() 替代created✅ 保留setup() 替代…...

编程日记 2025/7/1 8:36:13

Ubuntu 22.04安装MongoDB：GLM4模型对话数据收集与微调教程

在Ubuntu 22.04安装MongoDB Community Edition的教程请点击下方链接进行参考： 点击这里获取MongoDB Community Edition安装教程今天将为大家带来如何微调GLM4模型并连接数据库进行对话的教程。快跟着小编一起试试吧~ 1. 大模型 ChatGLM4 微调步骤 1.1 从 github…...

编程日记 2025/7/1 13:26:22

并查集（Union-Find Set）课程笔记

目录 1. 并查集原理 2. 并查集的实现 3. 并查集应用应用 1：省份数量问题应用 2：等式方程的可满足性 1. 并查集原理并查集用于处理需要将不同元素划分成若干不相交集合的问题。最开始时，每个元素都是单独的一个集合，随后根…...

编程日记 2025/7/1 13:26:19

算法刷题记录——LeetCode篇(1.4) [第31~40题](持续更新)

更新时间：2025-03-29 算法题解目录汇总：算法刷题记录——题解目录汇总技术博客总目录：计算机技术系列博客——目录页优先整理热门100及面试150，不定期持续更新，欢迎关注！ 32. 最长有效括号给你一个只包…...

编程日记 2025/6/30 20:02:08

【区块链安全 | 第十四篇】类型之值类型（一）

文章目录值类型布尔值整数运算符取模运算指数运算定点数地址（Address）类型转换地址成员balance 和 transfersendcall，delegatecall 和 staticcallcode 和 codehash 合约类型（Contract Types）固定大小字节数组&#x…...

编程日记 2025/7/1 13:26:22

一款超级好用且开源免费的数据可视化工具——Superset

认识Superset 数字经济、数字化转型、大数据等等依旧是如今火热的领域，数据工作有一个重要的环节就是数据可视化。看得见的数据才更有价值！ 现如今依旧有多数企业号称有多少多少数据，然而如果这些数据只是呆在冷冰冰的数据库或文件内则毫无…...

编程日记 2025/7/1 13:27:51

android gradle一直编译不下来，可能是打开了gradle离线模式

gradle离线模式当然，如果本地已经将gradle，lib都下载下来了，也可以打开这个离线模式，不然重启AS的时候可能会重新走一次下载流程...

编程日记 2025/7/1 13:08:21

（C语言）学生信息表（学生管理系统）（基于通讯录改版）（正式版）（C语言项目）

1.首先是头文件： //student.h //头文件//防止头文件被重复包含#pragma once//宏定义符号常量，方便维护和修改 #define ID_MAX 20 #define NAME_MAX 20 #define AGE_MAX 5 #define SEX_MAX 5 #define CLA_MAX 20 //定义初始最大容量 #define MAX 1//定义结…...

编程日记 2025/6/28 1:27:41

【Linux】Linux 系统启动流程详解

1. BIOS/UEFI 阶段硬件自检（POST） BIOS/UEFI 执行硬件检查（内存、CPU、外设等）。若硬件异常，通过蜂鸣码或屏幕提示错误。选择启动设备按配置顺序（硬盘、U盘、网络等）寻找可引导设备。BIOS&a…...

编程日记 2025/6/28 1:27:31

Jetson 设备卸载 OpenCV 4.5.4 并编译安装 OpenCV 4.2.0

‌一、卸载 OpenCV 4.5.4‌ 清除已安装的 OpenCV 库‌ sudo apt-get purge libopencv* python3-opencv # 卸载所有APT安装的OpenCV包‌:ml-citation{ref"1,3" data"citationList"}sudo apt autoremove # 清理残留依赖‌:ml-citation{ref"1,4"…...

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

【计算机网络】OSI七层模型完全指南：从比特流到应用交互的逐层拆解

OSI模型导读一、概念二、模型层次结构2.1 物理层（Physical Layer）2.2 数据链路层（Data Link Layer）2.3 网络层（Network Layer）2.4 传输层（Transport Layer）2.5 会话层&…...

编程日记 2025/6/27 21:24:54

渗透测试：登录页面的测试-弱口令思路和实战

渗透测试：登录页面的测试思路和实战渗透测试（Penetration Testing），也称为“渗透性测试”，是一种评估计算机系统、网络或Web应用安全性的一种方法。它通过模拟真实世界中的攻击手段和策略，来检测目标系统…...

编程日记 2025/6/28 3:45:27

Android BottomNavigationView 完全自定义指南：图标、文字颜色与选中状态

1. 核心功能概述通过 Material Design 的 BottomNavigationView，你可以轻松实现以下自定义： ✅ 动态切换选中/默认图标 ✅ 自定义选中与默认文字颜色 ✅ 控制文字显示模式（始终显示/仅选中显示/自动隐藏） ✅ 添加动画和高级样…...

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

提示词工程

参考网站：提示工程指南 – Nextra 声明：我现在也才刚刚开始学习人工智能，我会着重于 agent 的学习，如果有不对的地方请大家及时指出。模型设置前言在向大模型发送请求时，常常能看到以下参数： {&qu…...

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

分页查询原理与优化方案完全指南

分页查询原理与优化方案完全指南一、分页查询基础原理 1.1 传统分页实现方式分页查询的核心目的是将大数据集分割成多个小块进行展示，最常见的实现方式是使用LIMIT-OFFSET语法： -- 基础分页查询 SELECT * FROM table_name ORDER BY id LIMIT page_size OFFSET (page_n…...

编程日记 2025/6/29 9:53:23

嵌入式软件设计规范框架（MISRA-C 2012增强版）

以下是一份基于MISRA-C的嵌入式软件设计规范（完整技术文档框架），包含编码规范、安全设计原则和工程实践要求： 嵌入式软件设计规范（MISRA-C 2012增强版） 一、编码基础规范 1.1 文件组织头文件保护 /* 示…...

编程日记 2025/6/28 1:27:51

课程6. 决策树

课程6. 决策树决策树直觉模型结构几何解释决策树的构建ID3算法信息内容标准使用决策树处理差距推广到回归问题分支标准与经典损失函数的关系过度拟合和欠拟合欠拟合过拟合优点和缺点案例随机生成数据集分类IRIS 数据集解决回归问题的一个简短例子决策树今天我们继续探索一…...

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

【UE5.3.2】初学1：适合初学者的入门路线图和建议

3D人物的动作制作大神分析：3D人物的动作制作通常可以分为以下几个步骤：角色绑定（Rigging）：将3D人物模型绑定到一个骨骼结构上，使得模型能够进行动画控制。动画制作（Animation）：通过控制骨骼结构，制作出人物的各种动作，例如走路、跳跃、打斗等。动画编辑（Ani…...

编程日记 2025/6/30 20:35:27

OpenCV 图形API（4）内核 API

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 G-API 背后的核心理念是可移植性——使用 G-API 构建的流水线必须是可移植的（或者至少具备可移植的能力）。这意味着&…...

编程日记 2025/6/30 20:15:11

pom.xml与.yml，java配置参数传递

pom.xml与 .yml java配置参数传递在Java项目中，通过 pom.xml 和 .yml 文件（如 application.yml）传递变量通常涉及构建时（Maven）和运行时（Spring Boot）两个阶段的配置。以下是具体的实现方法&…...

编程日记 2025/6/28 4:23:46

LeetCode算法题(Go语言实现)_21

题目给你一个整数数组 arr，如果每个数的出现次数都是独一无二的，就返回 true；否则返回 false。一、代码实现 func uniqueOccurrences(arr []int) bool {freq : make(map[int]int)// 统计每个数字的出现次数for _, num : range arr {freq[n…...

编程日记 2025/6/30 5:00:35

Docker部署前后端分离项目

镜像下载在有网络的电脑下载镜像（Windows）：依次在CMD命令台执行以下代码 docker pull node:20docker pull openjdk:22-jdkdocker pull mysql:8.0docker pull nginx:1.27 删除镜像代码： docker rmi node:latest 查看镜像列表…...

编程日记 2025/6/28 1:57:53

Linux系统安装MySQL 8.0完整指南（新手友好版）

MySQL作为最流行的开源关系型数据库之一，广泛应用于各种开发和生产环境。本教程将详细介绍在Linux系统上安装MySQL 8.0的全过程，包括卸载旧版本、安装新版本、基础配置和远程连接设置，特别适合Linux新手学习使用。一、卸载旧版MySQL&#x…...

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

#创建表，把id设为主键 mysql> create table test02(-> id int primary key, #----主键约束-> name varchar(50)-> ); Query OK, 0 rows affected (0.02 sec) #插入数据测试 mysql> insert into test02 values(1,"成都"); Query OK, 1 r…...

编程日记 2025/6/27 8:31:34

AI大模型下传统 Spring Java工程开发的演进和变化方向

1. 背景和动因传统Spring开发优势：Spring生态以稳定、模块化、依赖注入（DI）等特性著称，长期支撑企业级应用开发，具备高扩展性和可维护性。AI大模型崛起：近几年，LLM（如GPT-4、LLaMA…...

编程日记 2025/6/28 2:21:51

周学习总结

这周继续学习了Java的知识点，还写了考查递归、递推与贪心的算法题。算法小结递归与递推一般是观察观察题干，分析题目的规律，可能还会用到分治算法，推导出一个合理的表达式，再使用函数递归来进行求解。贪心在求解时…...

编程日记 2025/6/28 1:26:02

‌19.思科路由器：OSPF协议引入直连路由的实验研究

思科路由器：OSPF协议引入直连路由的实验研究一、实验拓扑二、基本配置2.1、sw1的配置2.2、开启交换机三层功能三、ospf的配置3.1、R1的配置3.2、R2的配置3.3、重启ospf进程四、引入直连路由五、验证结果随着互联网技术的不断发展，路由器作为网络互联的关键设备，其性能与稳定…...

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

Zcanpro搭配USBCANFD-200U在新能源汽车研发测试中的应用指南（周立功/致远电子）

——国产工具链的崛起与智能汽车测试新范式引言：新能源汽车测试的国产化突围随着新能源汽车智能化、网联化程度的提升，研发测试面临三大核心挑战：多协议融合（CAN FD/LIN/以太网）、高实时性数据交互需求、复杂工况下…...

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

JSON的基础知识

文章目录前言json协议的基本格式json 数组类型的语法规则json协议报文的实例json常见的一些格式错误在gd32中使用cjson库小结前言 json协议在互联网应用，物联网应用中都会用到。所谓工欲善其事必先利其器，我们需要学习了解json协议的具体格式&#xf…...

编程日记 2025/6/29 19:40:27

week2|机器学习（吴恩达）学习笔记

一、多维特征 1.1、什么是多维特征？ 1）在我们的原始估计房价的版本中，我们只有一个变量： x x x 来预估 y y y 2）但是现在假设你也知道其他的参数变量，那么我们就可以引入多个参数来提高预测 y y y的准确…...

编程日记 2025/6/27 21:03:44

各类神经网络学习：（七）GRU 门控循环单元（上集），详细结构说明

上一篇下一篇LSTM（下集）GRU（下集） GRU（门控循环单元） 它其实是 R N N RNN RNN 和 L S T M LSTM LSTM 的折中版，有关 R N N RNN RNN 和 L S T M LSTM LSTM 请参考往期博客。实际应用要比 …...

编程日记 2025/6/30 12:20:30

uniapp利用第三方（阿里云）实现双人视频/音频通话功能（附完整的项目代码）

要在UniApp中利用阿里云实现双人视频/音频通话功能，你需要使用阿里云的实时音视频服务（RTC）。以下是一个基本的实现步骤和示例代码。基本的操作步骤注册阿里云账号并开通RTC服务：访问阿里云官网，注册账号并开通RTC服务。获取AppID和AppKey：在RTC控制台创建应用，…...

编程日记 2025/6/28 5:30:37

wsl2的centos7安装jdk17、maven

JDK安装查询系统中的jdk rpm -qa | grep java按照查询的结果，删除对应版本 yum -y remove java-1.7.0-openjdk*检查是否删除 java -version 下载JDK17 JDK17，下载之后存到wsl目录下（看你自己）然后一键安装 sudo rpm -ivh jd…...

编程日记 2025/6/30 20:33:22

Android 单例模式全解析：从基础实现到最佳实践

单例模式（Singleton Pattern）是软件开发中常用的设计模式，其核心是确保一个类在全局范围内只有一个实例，并提供全局访问点。在 Android 开发中，单例模式常用于管理全局资源（如网络管理器、数据库助手、配置…...

编程日记 2025/6/29 19:08:18

Redis GEO

Redis GEO 引言 Redis GEO是Redis数据库中的一种高级功能，允许用户存储地理位置信息并执行基于地理空间查询的操作。本文将详细介绍Redis GEO的基本概念、使用方法以及在实际应用中的优势。基本概念 GEO编码 GEO编码是指将地理位置信息（如经纬度&a…...

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

vulnhub-serile靶机通关攻略

下载地址：https://www.vulnhub.com/entry/serial-1,349/ 靶机安装特殊，附带安装参考文章：https://zhuanlan.zhihu.com/p/113887109 扫描IP地址 arp-scan -l扫描端口 nmap -p- 192.168.112.141访问80端口线索指向cookie cookie是base64编…...

编程日记 2025/6/29 23:45:19

SAP-ABAP:OData 协议深度解析：架构、实践与最佳应用

OData 协议深度解析：架构、实践与最佳应用一、协议基础与核心特性协议定义与目标定位：基于REST的开放数据协议，标准化数据访问接口，由OASIS组织维护，最新版本为OData v4.01。设计哲学：通过统一资源标识符（URI）和HTTP方法抽象数据操作，降低异构系统集成复杂度。核心…...

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

408 计算机网络知识点记忆（3）

前言本文基于王道考研课程与湖科大计算机网络课程教学内容，系统梳理核心知识记忆点和框架，既为个人复习沉淀思考，亦希望能与同行者互助共进。（PS：后续将持续迭代优化细节） 往期内容 408 计算机网络知识…...

编程日记 2025/6/28 1:27:50

java学习笔记10——集合框架

枚举类的使用 Collection接口继承树 Map接口继承树 Collection 接口方法总结： 集合框架概述 1.内存层面需要针对于多个数据进行存储。此时，可以考虑的容器有:数组、集合类2.数组存储多个数据方面的特点:> 数组一旦初始化，其长度就是确定的…...

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

埃文科技企业AI大模型一体机——昇腾体系+DeepSeek+RAG一站式解决方案

面对企业级市场海量数据资产与复杂业务场景深度耦合的刚需，埃文科技重磅推出基于华为昇腾算力DeepSeek大模型的企业一体机产品，提供DeepSeek多版本大模型一体机选择，为企业提供本地昇腾算力DeepSeek大模型RAG知识库的一体化解决方案&#xff…...

编程日记 2025/6/28 7:12:12

蓝桥杯---BFS解决FloofFill算法1---图像渲染

文章目录 1.算法简介2.题目概述3.算法原理4.代码分析 1.算法简介这个算法是关于我们的floodfill的相关的问题，这个算法其实从名字就可以看出来：洪水灌溉，其实这个算法的过程就和他的名字非常相似，下面的这个图就生动的展示了这个…...

编程日记 2025/6/29 20:12:09

个人博客网站从搭建到上线教程

步骤1：设计个人网站设计个人博客网站的风格样式，可以在各个模板网站上多浏览浏览，以便有更多设计网站风格样式的经验。设计个人博客网站的内容，你希望你的网站包含哪些内容如你的个人基本信息介绍、你想分享的项目、你想分享的技术文档等等。步骤2：选择开发技术栈因…...

编程日记 2025/6/28 4:47:14

【FreeRTOS】裸机开发与操作系统区别

🔎【博主简介】🔎 🏅CSDN博客专家 🏅2021年博客之星物联网与嵌入式开发TOP5 🏅2022年博客之星物联网与嵌入式开发TOP4 🏅2021年2022年C站百大博主 🏅华为云开发…...

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

力扣每日一题：2712——使所有字符相等的最小成本

使所有字符相等的最小成本题目示例示例1示例2 题解这些话乍一看可能看不懂，但是多读两遍就明白了。很神奇的解法，像魔术一样。题目给你一个下标从 0 开始、长度为 n 的二进制字符串 s ，你可以对其执行两种操作： 选中一个下标…...

编程日记 2025/6/30 18:04:57

Java EE(17)——网络原理——IP数据报结构IP协议解析(简述)

一.IP数据报结构 (1)版本：指明协议的版本，IPv4就是4，IPv6就是6 (2)首部长度：单位是4字节，表示IP报头的长度范围是20~60字节 (3)8位区分服务：实际上只有4位TOS有效，分别是最小延时，最…...

编程日记 2025/6/30 12:13:43

Pycharm运行时报“Empty suite”，可能是忽略了这个问题

问题：使用Pycharm运行testcases目录下的.py文件，报“Empty suite”，没有找到测试项。排查过python解释器、pytest框架安装等等，依然报这个错，依然没找到，最后终端运行： pytest test_demo.py&a…...

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

Linux快速安装docker和docker-componse步骤

在 CentOS 7 上安装 Docker 和 Docker Compose 的步骤如下： 1. 安装 Docker 1.1. 更新系统首先，确保你的系统是最新版本： sudo yum update -y1.2. 安装必要的包安装 yum-utils，这是管理 YUM 源的工具： sudo yu…...

编程日记 2025/6/28 1:30:58

OP2177运算放大器：高性能模拟信号处理的关键元件

在现代电子系统中，模拟信号处理至关重要，运算放大器作为模拟电路的核心部件，其性能优劣直接影响系统的整体表现。OP2177 是一款具有卓越性能的运算放大器，在众多领域有着广泛应用。以下将结合相关资料，对 OP2177 进行全…...

编程日记 2025/6/27 9:49:14

paddle ocr

paddle ocr paddle ocr笔记准备工作referenceto onnx文本检测文本检测文字识别 paddle ocr笔记准备工作下载字典ppocr_keys_v1.txt，下标从1开始模型转换 reference paddlepaddle to onnx 下载模型，或者直接使用python跑一下并且把本地模型拿过来…...

编程日记 2025/6/27 6:10:18

通过动态获取项目的上下文路径来确保请求的 URL 兼容两种启动方式（IDEA 启动和 Tomcat 部署）下都能正确解析

背景因为在不同的启动环境下，获取上下文路径的方式需要有所调整。在 IDEA 中运行时，路径是基于当前页面的 URL（如 index.html），而在 Tomcat 部署时，它是基于项目上下文路径（如 ssm-project&am…...

编程日记 2025/6/28 3:43:23

🎯 Vue2 vs Vue3 生命周期全面对比：created 的进化与革新