Vue3与Vue2的区别简明笔记

news/2024/10/18 14:26:50/

vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻,更快,使⽤起来更加⽅便,每⼀次的版本迭代都是对上⼀个版本的升级优化,不管
是对于我们开发者还是对于⽤户体验都是不断地在越来越⽅便,接下来我会着重于开发者来说⼀下两个不同版本的区别

1、生命周期

Vue2Vue3
beforeCreate
created
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted

2、异步组件

Vue3 提供 Suspense组件,允许程序在等待异步组件时渲染兜底的内容,如 loading ,使用户体验更平滑。使用它,需在模板中声明,并包括两个命名插槽:default和fallback。Suspense确保加载完异步内容时显示默认插槽,并将fallback插槽用作加载状态。

<tempalte><suspense><template #default><todo-list /></template><template #fallback><div>Loading...</div></template></suspense>
</template>

若想在 setup 中调用异步请求,需在 setup 前加async关键字。这时,会受到警告async setup() is used without a suspense boundary。

解决方案:在父页面调用当前组件外包裹一层Suspense组件。

3、多根节点

Vue3 支持了多根节点组件

Vue2中,必须单个根节点,比如<div>,否则报错警告。

4、 TypeScript 支持

Vue3 由TS重写,相对于 Vue2 有更好地TypeScript支持。

  • Vue2 Option API中 option 是个简单对象,而TS是一种类型系统,面向对象的语法,不是特别匹配。
  • Vue2 需要vue-class-component强化vue原生组件,也需要vue-property-decorator增加更多结合Vue特性的装饰器,写法比较繁琐。

5、默认目录结构的变化

vue-cli2.0与3.0在目录结构方面,有明显的不同
vue-cli3.0移除了配置文件目录,config 和 build 文件夹
同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中

6、配置项

3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同
没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变

7、渲染

Vue2.x使用的Virtual Dom实现的渲染

Vue3.0不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码

8、数据监听

Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的,而vue3.0的版本,是基于Proxy进行监听的,其实基于proxy监听就是所谓的lazy by default,什么意思呢,就是只要你用到了才会监听,可以理解为‘按需监听’,官方给出的诠释是:速度加倍,同时内存占用还减半。

9、按需引入

Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实无论你用到还是没用到,都会跑一变。而vue3.0中可以用ES module imports按需引入,如:keep-alive内置组件、v-model指令,等等。

10、vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x,使用proxy的优势如下

  • defineProperty只能监听某个属性,不能对全对象监听
    可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
  • 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可 3.以检测到数组内部数据的变化

11、默认进行懒观察(lazy observation)

在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。

12、更精准的变更通知

比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。


http://www.ppmy.cn/news/487453.html

相关文章

2023新款家用洗地机哪个牌子好?清洁效果好的智能洗地机推荐

洗地机没有使用过之前一直怀疑是不是智商税&#xff0c;等到后面体验过之后&#xff0c;发现是真的香。因为不可否认的是&#xff0c;洗地机的清洁力还是不错的。相对于有时候突发状况下的打倒饭菜或者是小孩子调皮把家里弄得脏乱无比的情况下。洗地机不仅能够快速清洁干净地面…

智能洗地机哪个牌子好用、智能洗地机好用品牌推荐

家用洗地机是一种非常实用的家庭清洁设备&#xff0c;它可以帮助我们轻松地清洁地面&#xff0c;让家居环境更加清洁卫生。相比传统的拖把清洁方式&#xff0c;家用洗地机不仅更加高效&#xff0c;而且更加卫生&#xff0c;可以有效地去除地面上的污渍和细菌。在选择家用洗地机…

创建线程三种方法

创建和运行线程 方法一&#xff0c;直接使用 Thread // 创建线程对象 Thread t new Thread() { public void run() {// 要执行的任务} }; // 启动线程 t.start(); 例如&#xff1a; // 构造方法的参数是给线程指定名字&#xff0c;推荐Thread t1 new Thread("t1"…

Knowledge Distillation of Large Language Models

这是大模型系列模型的文章&#xff0c;针对《Knowledge Distillation of Large Language Models》的翻译。 大模型的知识蒸馏 摘要1 引言2 方法2.1 MiniLLM&#xff1a;利用逆向KLD进行知识蒸馏2.2 策略梯度优化2.3 训练算法 3 实验3.1 实验设置3.2 结果3.3 分析3.4 消融实验 …

textract OCR的安装使用

安装 pip install textract使用 在 Python 中&#xff0c;textract 是一个用于提取文本和信息的库。它提供了一个函数 textract.process()&#xff0c;用于处理不同类型的文档并提取文本内容。下面是 textract.process() 函数的各个参数的介绍&#xff1a; filename&#xf…

基于高精度三维机器视觉的汽车曲轴无序抓取系统应用

Part.1 行业背景 汽车产业的高速发展&#xff0c;对零部件自动化生产提出了更高要求。随着汽车销量的水涨船高&#xff0c;传统的手工生产模式已经难以满足大批量生产的需求&#xff0c;自动化生产是必然趋势。 曲轴是汽车发动机的关键组件之一&#xff0c;生产过程复杂&#…

windows11 安装Python环境

安装Python3.11.4 1.下载2.找到当前系统的版本3.安装 1.下载 访问Python官网 2.找到当前系统的版本 3.安装 在安装导向中&#xff0c;选择"Customize installation"&#xff08;自定义安装&#xff09;选项&#xff0c;以便于可以选择安装路径和其他选项在"…

gunicorn配置中bind字段指定具体值存在安全风险(硬编码IP)的解决方案

我的环境&#xff1a; nginx---&#xff08;反向代理&#xff09;---gunicorn&#xff1b; gunicorn使用supervisor管理&#xff1b; 建议方案二 方案一&#xff1a;将127.0.0.1:8000这个字符串定义成系统变量&#xff0c;读取系统变量 import multiprocessing import os …