Vue2 和 Vue3 的区别 (性能,编码方式,API 特性,源码)

在这个快节奏的时代,技术更新换代的速度也越来越快。我一直在使用Vue 2来开发项目。然而,现在越来越多的公司转向了Vue 3,并将其作为主要的前端开发框架。这就需要我们及时跟进新技术的发展,以保持竞争力。因此,我决定全力以赴地学习Vue 3,并且希望通过这个过程,不仅能够填补自己的知识空白,还能够在未来提升自己的竞争力。

1. 性能提升

Vue3 在性能方面进行了巨大的提升

1. 响应式系统升级: Vue3 使用 Proxy 替代 Object.defineProperty 实现响应式,不再需要深度递归监听属性变化,提高了响应式系统的效率。
// Vue2 中的响应式数据定义
data() {return {message: 'Hello, Vue2!'}
}// Vue3 中的响应式数据定义
const message = ref('Hello, Vue3!');
2. Diff 算法重写: Vue3 重写了 Diff 算法,采用最长递归子序列的算法,来计算出最小的修改偏移量,提升了渲染性能。
// Vue2 中的渲染逻辑
render() {return h('div', this.message);
}// Vue3 中的渲染逻辑
return () => h('div', message.value);
3. 静态提升: Vue3 中对不参与更新的元素做了静态提升,只会被创建一次,在渲染时直接复用,减少了重复的创建操作,优化了内存占用。
<!-- Vue2 中的模板 -->
<template><div>{{ message }}</div>
</template><!-- Vue3 中的模板 -->
<template><div>{{ message }}</div>
</template>

2. 编码方式

Vue3 引入了 Composition API,与 Vue2 中的 Options API 相比,具有更灵活和清晰的代码组织方式。

1. Setup 函数: Vue3 中使用 setup() 函数来组织组件逻辑,可以将数据、方法等都定义在其中,并最终返回给模板使用。
// Vue2 中的 Options API
data() {return {count: 0}
}// Vue3 中的 Composition API
setup() {const count = ref(0);return { count };
}
2. 模板引用: 在模板中直接引用 setup() 返回的数据和方法,使得代码更加简洁明了。
<!-- Vue2 中的模板 -->
<template><div>{{ count }}</div><button @click="increment">Increment</button>
</template><!-- Vue3 中的模板 -->
<template><div>{{ count }}</div><button @click="increment">Increment</button>
</template>

3. API 方面

Vue3 引入了许多新的 API 特性

  1. Teleport 特性: 可以将组件的内容渲染到指定 DOM 节点,方便创建全局弹窗和对话框等组件。
<!-- Vue3 中的 Teleport 特性 -->
<teleport to="body"><Modal />
</teleport>
2. Suspense 特性: 可以用来实现组件异步加载时的 loading 效果,提升用户体验。
<!-- Vue3 中的 Suspense 特性 -->
<suspense><template #default><AsyncComponent /></template><template #fallback><LoadingSpinner /></template>
</suspense>

4. 源码层面

Vue3 在源码层面进行了许多优化,以提升性能和减少体积。

1. 响应式系统升级: 使用 Proxy 替代 Object.defineProperty,减少了深度监听的开销。
2. Diff 算法重写: 采用最长递归子序列算法,优化了虚拟 DOM 的比对过程。
3. 模块拆分和 Tree Shaking: 对所有的 API 进行重写,并采用函数式编程,实现了更好的 Tree Shaking,减少了打包体积。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/4893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言阶段性测试错题纠正与拓展

引言&#xff1a;在2024年4月26日&#xff0c;我进行了C语言知识的“期末考试”。通过这次考试&#xff0c;我发现了我的知识漏洞。所以&#xff0c;我写下这篇博客来记录我的错题&#xff0c;并进行纠正&#xff0c;然后对于以前遗忘知识的回顾。 更多有关C语言的知识详解可前…

HarmonyOS编程实践系列:第一节 - 创建健康App欢迎页

系列文章目录 &#xff08;零&#xff09;鸿蒙HarmonyOS入门&#xff1a;如何配置环境&#xff0c;输出“Hello World“ &#xff08;一&#xff09;鸿蒙HarmonyOS开发基础 &#xff08;二&#xff09;鸿蒙HarmonyOS主力开发语言ArkTS-基本语法 &#xff08;三&#xff09;鸿蒙…

梳理一下低代码的真正价值!另推荐超好用的5款低代码开发平台

一、先来聊聊低代码的真实价值&#xff01; 在回答这个问题之前&#xff0c;我们不妨先来看两个案例&#xff1a; 某连锁商超企业在发展中产生了新的业务需求&#xff0c;一是希望能够快速展示门店销售数据&#xff0c;满足高层的管理需求&#xff1b;二是希望巡店、上架商品…

字典及GitHub字典爬取工具

红队API接口Fuzz字典可以用于WEB安全&#xff0c;渗透测试&#xff0c;SRC等场景 完整文件已上传知识星球&#xff0c;需要的朋友可加入查看。

Jitter 和相位噪声

近期学习PLL的时候&#xff0c;发现里面有诸多jitter类型&#xff0c;绕晕了&#xff0c;写个帖子记录一下学习过程。 目录 基本jitter和相噪概念 jitter 相位噪声 相位噪声和jitter之间的联系 三种常见的抖动类型及其特点 基本jitter和相噪概念 无噪声振荡器的输出是一…

状态模式

文章目录 1.UML类图2.状态基类3.状态实现类3.状态机管理类使用示例 1.UML类图 2.状态基类 public abstract class State {public string? Name { get; set; }public StateMachine? StateMachine {get; set;}public abstract void Exit();public abstract void Enter(); }3.…

生成删除数据库表数据的SQL语句

--获取表的名称及用表中第一列的注释作表的说明 select delete from ,Name2 ,--,RANK()OVER (ORDER BY Name2 DESC) as 序号,字段说明 from ( select bb.name as Name2,cc.* from ( select min(minor_id) as minor_id,id from ( SELECT g.minor_id minor_id,a.Name as Name …

解析vue.config.js文件

一、用途 创建 Vue 项目时&#xff0c;默认情况下是没有 vue.config.js 文件的。Vue CLI 会提供一组默认的配置&#xff0c;用于构建和开发项目&#xff0c;这些配置在内部被封装好了&#xff0c;并不需要用户手动创建 vue.config.js 文件来进行配置。通过在项目根目录下创建 …

重生奇迹MU首饰属性之迷

雷&#xff1a;抵抗移位、掌心雷 冰&#xff1a;抵抗冰度冻、冰封问箭、暴风雪、冰封 毒&#xff1a;降低中毒几率&#xff08;中毒不掉血&#xff09;、毒咒、毒炎 风&#xff1a;抵抗移位旋风斩&#xff08;没试过不过很多人用&#xff09;、龙卷风 至于火水地因为并没有…

分布式与一致性协议之Paxos算法(三)

Paxos算法 兰伯特关于Multi-Paxos的思考 领导者 我们可以通过引入领导者(Leader)节点来解决第一个问题。也就是说将领导者节点作为唯一提议者&#xff0c;如图所示。这样就不存在多个提议者同时提交提案的情况&#xff0c;也就不存在提案冲突的情况了。这里补充一点:在论文中…

NAT网络地址转换实验(思科)

华为设备参考&#xff1a;NAT网络地址转换实验&#xff08;华为&#xff09; 一&#xff0c;技术简介 NAT&#xff08;Network Address Translation&#xff09;&#xff0c;即网络地址转换技术&#xff0c;是一种在现代计算机网络中广泛应用的技术&#xff0c;主要用于有效管…

游戏新手村23:游戏数据分析都是谁在看数据

不管是做端游页游还是手游&#xff0c;不管是做市场广告投放还是游戏运营&#xff0c;都需要看数据。有的人说“数据会说话”&#xff0c;也有人说“数据会说谎”&#xff0c;有的人言必谈大数据&#xff0c;有的人则能善于从细小的数据着手发现问题。 我知道和了解的一些游戏…

react怎么只让接口请求一次

在React中&#xff0c;确保接口只请求一次通常涉及到组件的生命周期和状态管理。以下是一些常用的策略&#xff1a; 使用组件的useEffect钩子&#xff08;函数组件&#xff09;: 如果你使用的是函数组件&#xff0c;你可以使用useEffect钩子来发起请求&#xff0c;并确保它只在…

SpringBoot - java.lang.NoClassDefFoundError: XXX

问题描述 以 json-path 为例&#xff1a;java.lang.NoClassDefFoundError: com/jayway/jsonpath/Configuration 原因分析 编译不报错&#xff0c;但是运行时报错。 遇到这样类似的问题&#xff0c;首先就要想到是不是 Jar 包冲突引起的&#xff0c;或者引入的不是理想的 Jar…

数据仓库实验二:关联规则挖掘实验

目录 一、实验目的二、实验内容和要求三、实验步骤1、创建数据库和表2、挖掘关联规则&#xff08;1&#xff09;新建一个 Analysis Services 项目 Sales&#xff08;2&#xff09;建立数据源视图&#xff08;3&#xff09;建立挖掘结构 Sales.dmm&#xff08;4&#xff09;部署…

Java集合相关的List、Set、Map基础知识

目录 一、集合介绍 二、List 三、Map HashMap的数据结构 如何理解红黑树 四、set 一、集合介绍 在Java中&#xff0c;集合是一种用于存储对象的数据结构&#xff0c;它提供了一种更加灵活和强大的方式来处理和操作数据。Java集合框架提供了一系列接口和类&#xff0c;用…

Pointnet++改进即插即用系列:全网首发PPA反向残差移动块 |即插即用,提升特征提取模块性能

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入PPA,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3 步骤三

Transformer模型详解01-Word Embedding

文章目录 前言Transformer 整体结构Transformer 的输入单词 Embedding原理CBOW 模型one-hot构建 CBOW 训练数据集构建 CBOW 神经网络训练 CBOW 神经网络 Skip-gram 模型one-hot构建 Skip-gram训练数据集训练 Skip-gram神经网络 Word2Vec实例数据训练保存和加载 前言 Transform…

【上岗认证】错题整理记录

目录 &#x1f31e;一、阶段1&#xff1a;编码规范 &#x1f30a;编码规范考试-CC &#x1f31e;二、阶段2&#xff1a;开发基础 &#x1f30a;C/C &#x1f30a;数据库&#xff08;Oracle/MySql&#xff09; &#x1f31e;三、阶段3&#xff1a;测试基础 &#x1f30a;…

Springboot+Vue项目-基于Java+MySQL的家政服务平台系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…