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

Vue3相比于Vue2进行了哪些更新

1、响应式原理

vue2

  vue2中采用 defineProperty 来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加gettersetter,结合发布订阅模式实现响应式。

存在的问题:

  • 检测不到对象属性的添加和删除
  • 数组API方法无法监听到
  • 需要对每个属性进行遍历监听,如果嵌套对象,需要深层监听,造成性能问题

Vue3

  vue3采用proxy重写了响应式系统,proxy的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作。
  proxy可以直接监听数组的变化。

2、语法API

vue2

  Options API,即选项API。以vue为后缀的文件,通过定义methodscomputedwatchdata等属性与方法,共同处理页面逻辑。
  然而,当组件变得复杂,导致对应属性的列表也会增长,这可能会导致组件难以阅读和理解。

Vue3

  Composition API,即组合式API。组件根据逻辑功能来组织的,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合)。
  即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API。

3、Vue3支持多个根节点

  Vue2中,组件只能有一个根节点
  Vue3中,组件可设置多个根节点

4、生命周期

  Vue 3 新增了 setup() 函数,替代了 Vue 2 的 beforeCreatecreated 钩子函数。在 setup() 函数中,我们可以直接访问组件的实例属性方法,以及通过 next() 函数来访问父组件中的属性和方法。
在这里插入图片描述

5、Tree Shaking

  tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术。主要是借助ES6模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量。
  Vue3源码引入tree shaking特性,将全局 API 进行分块。如果您不使用某些功能,它们将不会包含在您的基础包中。

6、Diff算法优化

Vue2

  当数据发生变化,它就会新生成一个DOM树,并和之前的DOM树进行比较,找到不同的节点然后更新。但这比较的过程是全量的比较,也就是每个节点都会彼此比较。但其中很显然的是,有些节点中的内容是不会发生改变的,那我们对其进行比较就肯定消耗了时间。

Vue3

  在创建虚拟DOM树的时候,会根据DOM中的内容会不会发生变化,添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候,就只会对比这些带有静态标记的节点。

7、静态提升

  Vue2中无论元素是否参与更新,每次都会重新创建,然后再渲染。
  Vue3中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用。这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操作,优化了运行时候的内存占用。
  例子:

<span>你好</span>
<div>{{ message }}</div>

  没有做静态提升之前

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode("span", null, "你好"),_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}

  做了静态提升之后

const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "你好", -1 /* HOISTED */)export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_hoisted_1,_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}// Check the console for the AST

  静态内容_hoisted_1被放置在render 函数外,每次渲染的时候只要取 _hoisted_1 即可。
  同时 _hoisted_1 被打上了 PatchFlag ,静态标记值为 -1 ,特殊标志是负整数表示永远不会用于 Diff。

8、事件监听缓存

  默认情况下绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化。但是因为是同一个函数,所以没必要去追踪它的变化。开启事件侦听器缓存后,没有了静态标记,下次diff算法的时候直接使用提升性能。

9、TypeScript

  Vue3是基于typeScript编写的,提供了更好的类型检查,能支持复杂的类型推导。

以上就是个人的一些见解,如有不足或补充,欢迎一起探讨!!!

相关文章:

Vue3相比于Vue2进行了哪些更新

1、响应式原理 vue2 vue2中采用 defineProperty 来劫持整个对象&#xff0c;然后进行深度遍历所有属性&#xff0c;给每个属性添加getter和setter&#xff0c;结合发布订阅模式实现响应式。 存在的问题&#xff1a; 检测不到对象属性的添加和删除数组API方法无法监听到需要对…...

Unity UGUI 之 Slider

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.Slider是什么 滑块&#xff0c;由三部分组成&#xff1a;背景 填充条 手柄 填充条就是…...

这7款高效爬虫工具软件,非常实用!

在当今数据驱动的时代&#xff0c;自动化爬虫工具和软件成为了许多企业和个人获取数据的重要手段。这里会介绍6款功能强大、操作简便的自动化爬虫工具&#xff0c;用好了可以更高效地进行数据采集。 1. 八爪鱼采集器 八爪鱼是一款功能强大的桌面端爬虫软件&#xff0c;主打可…...

【OJ】二叉树相关OJ题

✨✨欢迎大家来到Celia的博客✨✨ &#x1f389;&#x1f389;创作不易&#xff0c;请点赞关注&#xff0c;多多支持哦&#x1f389;&#x1f389; 所属专栏&#xff1a;OJ题 个人主页&#xff1a;Celias blog~ 目录 ​编辑 单值二叉树 题目描述 OJ-单值二叉树 解题思路 …...

Blender中保存透明图片

在Blender中保存透明图片&#xff0c;主要是通过在渲染设置中调整背景透明度&#xff0c;并选择合适的文件格式来保存图像。以下是一个详细的步骤指南&#xff1a; 一、设置渲染属性 打开Blender并加载你想要渲染的模型。在右侧的属性编辑器中&#xff0c;找到并点击“渲染属…...

MySQL之索引优化

1、在进行查询时&#xff0c;索引列不能是表达式的一部分&#xff0c;也不能是函数的参数&#xff0c;否则无法使用索引 例如下面的查询不能使用 actor_id 列的索引&#xff1a; #这是错误的 SELECT actor_id FROM sakila.actor WHERE actor_id 1 5; 优化方式&#xff1a;…...

Spring Boot 与 Amazon S3:快速上传与下载文件的完整指南

概要 在将 Spring Boot 更新到 3 系列时&#xff0c;由于 javax 需要被替换为 jakarta&#xff0c;因此原先依赖于 javax 的 spring-cloud-starter-aws1 将无法使用&#xff08;虽然在我本地环境中仍然可以正常工作&#xff09;。为了确保兼容性&#xff0c;我将依赖关系更改为…...

细节剖析:HTTP与HTTPS在安全性、性能等方面的不同!

HTTPS是现代互联网通信的重要基石&#xff0c;通过加密通信、身份验证和数据完整性保护&#xff0c;为数十亿用户提供了安全可靠的互联网体验。 小编整理了2GB程序员相关资料&#xff0c;关注微信公众号“程序员Style”回复“程序员”免费领取&#xff01; 1、介绍 随着 HTT…...

MySQL面试篇章——MySQL索引

文章目录 MySQL 索引索引分类索引创建和删除索引的执行过程explain 查看执行计划explain 结果字段分析 索引的底层实现原理B-树B树哈希索引 聚集和非聚集索引MyISAM&#xff08;\*.MYD&#xff0c;*.MYI&#xff09;主键索引辅助索引&#xff08;二级索引&#xff09; InnoDB&a…...

WSL 2 Oracle Linux 9.1 安装配置

文章目录 环境使用体验安装 Oracle Linux 9.1修改默认存储路径默认 root 用户登录启用 systemd启用 SSH 连接WSL 无法 ping 通宿主机和域名WSL 使用主机代理&#xff08;测试通过&#xff09;WSL 常用命令 环境 OS&#xff1a;Win11 24H2 (OS 内部版本26120.1252) wsl --versio…...

MySQL日志文件详解

MySQL中的日志文件是MySQL数据库系统的重要组成部分&#xff0c;它们记录了数据库的运行情况、用户操作、错误信息等&#xff0c;对于数据库的维护、优化、故障排查和恢复都具有重要意义。以下是MySQL中几种主要日志文件的详解&#xff1a; 1. 二进制日志&#xff08;Binary L…...

MySQL零散拾遗(三)

在mysql中&#xff0c;JOIN ON 和 WHERE 的作用和用法是怎么样的&#xff1f; 在MySQL中&#xff0c;JOIN语句用于将两个或多个表根据指定的关联条件合并成一个新的结果集。JOIN ON和WHERE子句在JOIN语句中扮演着不同的角色&#xff0c;它们的用法和作用如下&#xff1a; JOI…...

鸿蒙 使用 Refresh 实现下拉刷新

import promptAction from ohos.promptActionEntry Component struct Index {Staterefreshing: boolean falseStatelist: number[] Array(20).fill(Date.now())Buildercontent(){Stack(){Row(){LoadingProgress().height(32)Text(正在刷新...).fontSize(16).margin({left:20}…...

【JavaScript 算法】图的遍历:理解图的结构

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、深度优先搜索&#xff08;DFS&#xff09;深度优先搜索的步骤深度优先搜索的JavaScript实现 二、广度优先搜索&#xff08;BFS&#xff09;广度优先搜索的步骤 三、应用场景四、总结 图的遍历是图论中的基本操作之一&am…...

Ubuntu 中默认的 root 用户密码

场景&#xff1a;想要切换root用户&#xff0c;发现得输入密码&#xff0c;以为是以前设置过然后一直尝试都是错误【认证失败】最后发现根本没设置过root用户&#xff0c;默认会随机生成root用户的密码&#x1f605; Ubuntu 中默认的 root 密码是随机的&#xff0c;即每次开机都…...

Rust编程-高级特性

unsafe&#xff1a;内存不安全 内存安全问题&#xff0c;例如空指针解引用 关键字unsafe来切换到不安全模式&#xff0c;并在被标记后的代码块中使用不安全代码 使用unsafe告诉编译器后面代码安全性自行负责 因为电脑硬件安全问题&#xff0c;必须编写可能不安全的代码 可以将…...

JavaRegexImprove练习(1) (2024.7.22)

ImproveExercise1 package RegexImprove20240722; import java.util.Scanner; public class ImproveExercise {public static void main(String[] args) {Scanner sc new Scanner(System.in);System.out.println("请输入一个字符串");String str sc.nextLine();//…...

基于YOLO模型的鸟类识别系统

鸟类识别在生物研究和保护中具有重要意义。本文将详细介绍如何使用YOLO&#xff08;You Only Look Once&#xff09;模型构建一个鸟类识别系统&#xff0c;包括UI界面、YOLOv8/v7/v6/v5代码以及训练数据集。 目录 2. 环境配置 2.1 安装Python和相关库 2.2 安装YOLO模型库 …...

WebRTC通话原理(SDP、STUN、 TURN、 信令服务器)

文章目录 1.媒体协商SDP简介 2.网络协商STUN的工作原理TURN工作原理 3.信令服务器信令服务器的主要功能信令服务器的实现方式 1.媒体协商 比如下面这个例子 A端与B端要想通信 A端视频采用VP8做解码&#xff0c;然后发送给B端&#xff0c;B端怎么解码&#xff1f; B端视频采用…...

面试场景题系列--(1)如果系统的 QPS 突然提升 10 倍该怎么设计?--xunznux

1. 如果系统的 QPS 突然提升 10 倍该怎么设计&#xff1f; 1.1 硬件的扩展微服务的拆分 如果所有的业务包括交易系统、会员信息、库存、商品等等都夹杂在一起&#xff0c;当流量一旦起来之后&#xff0c;单体架构的问题就暴露出来了&#xff0c;机器挂了所有的业务就全部无法…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...