当前位置: 首页 > 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;机器挂了所有的业务就全部无法…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

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

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

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...