vue3为什么比vue2快

已于 2024-02-26 17:12:19 修改
阅读量200 收藏
点赞数 3
文章标签： 前端 vue.js javascript
于 2024-02-22 10:08:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66588740/article/details/136216841
版权
 1.proxy响应式。对整个对象的劫持

2.patchFlag

        vue2中的虚拟dom是全量对比（不管是动态还是静态的，浪费时间在静态节点的对比上）

        vue3只会对比带有patch flag的节点。可通过flag信息得知当前节点要对比的具体内容

        编译模板时，动态节点做标记

        使用位运算来检查更新

3.hoistState

        拿空间换时间

        把静态节点定义到父作用域存起来。不用每次渲染重新定义

        多个静态节点会合并

4.cacheHandler

      事件缓存

5.SSR优化

        

6.tree-shaking

        模板中需要的内容才会import进来

qq_66588740
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3为什么这么快
10-14
主要介绍了Vue3为什么这么快,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3.0比vue2.0更快的原因
秋来九月八
04-11 3335
一.vue3.0的亮点 1.性能比vue2.x快1.2~2倍 ①diff方法优化 ②静态提升 ③事件侦听器缓存 ④ssr渲染 1. diff方法优化 vue2.0中的虚拟dom是进行全量的对比 vue3.0新增了静态标记(PatchFlag)，在于上次虚拟节点进行对比的时候，只对比带有patch flag的节点。并且可以通过flag的信息得知当前节点要对比的具体内容。 静态标记枚举类： 2.静态提升 vue2.0无论元素是否参与更新，每次都会重新创建，然后再渲染 vue3.0对于不参与更新的元素，会做
为什么vue3.0相对于vue2.0来说性能快1.2到1.5倍？
weixin_65785071的博客
06-15 1306
vue 3.0比vue2.0性能更快
vue3对比vue2的优化
weixin_43962020的博客
05-19 2368
Vue3的模块结构进行了重构，采用ES modules标准，从而更容易进行tree-shaking，减少不必要的代码体积，提高应用性能。：Vue3采用了TypeScript作为主要开发语言，并在代码中使用了更多的类型声明，从而提供了更好的类型检查和自动补全支持。：Vue3中的编译器增加了更多的编译时优化，包括模板中静态节点的标记、事件处理函数的缓存等，从而提高运行时的性能。：Vue3通过更清晰的代码结构、更少的依赖和更好的文档，提高了代码的可读性和可维护性。
Vue3 性能比Vue2好的原因（diff算法优化、静态提升、事件侦听器缓存）
包磊磊的博客
02-21 2044
Vue3 diff算法优化 静态提升 hoistStatic 事件侦听器缓存 cacheHandlers 写下博客主要用来分享知识内容，并便于自我复习和总结。 如有错误之处，请各位大佬指出。 diff算法优化 首先，diff算法是虚拟DOM技术的必然产物，它会对新旧虚拟DOM作对比（即diff），然后将变化的地方更新在真实DOM上。而这其中，如何快速的判别需要变化的内容，就是Vue3.0的提升。具体来看： 在Vue2.0当中，当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同
VUE3.0（0）
缘于始，终于途
01-18 522
刚刚发布的3.0（1） 太过 突兀本文 主要是简单剖析一下 3.0相对2.0的优势和相关信息 一.VUE3.0的开始 1.为什么要开始学习Vue3.0? -因为正式版已经发版一段时间 逐渐趋于稳定 - 新年到来公司企业都会 有一些改革规划 新技术必不可少 - 当然学习也不是一蹴而就 对于新版本的 开发社区 正在逐步完善 +现在的努力只为了服务于未来 不能临时抱佛脚 2.如何学习Vue3.0? -不用全力以赴 +因为上线项目暂时还不会用 +因为相关生态还有待完...
Vue2 D3.js demo
03-03
npm install/yarn npm run serve
基于vue3的快速开发模板框架
02-22
基于vue3的快速开发模板框架
vue2以及vue3 chrome调试工具
09-22
vue2以及vue3 chrome调试工具
vue系列：vue3为何比vue2快？
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
05-26 550
Proxy响应式 PatchFlag hoistStatic cacheHandler SSR优化 tree-shaking PatchFlag https://vue-next-template-explorer.netlify.app 该网站可以左边写vue template，右边看到被编译为什么函数 编译模板时，动态节点做标记 标记分为不同的类型，如 TEXT PROPS diff 算法时，可以区分静态节点，以及不同类型的动态节点 如图，之前的 diff 算法是做对比，现在优化后，加入.
＜ 简述 “ 尤大 ” 的 Vue3 相比 Vue 2 的区别 ＞
一个平平无奇的技术宅
04-10 1650
文章目录一、发展历程及背景> vue.js发展历程> 背景二、Vue3 变化内容1、进步特征简述> 特征一：速度更快> 特征二：体积更小> 特征三：更易维护> 特征四：拥抱TypeScript> 特征五：更接近原生> 特征六：更易使用2、Vue3 中需要关注的新功能> framents> Teleport> createRenderer> composition Api3、非兼容变更> Global API> 模板指令&gt
VUE3对比VUE2的优势及新特性原理
热门推荐
zxo_apple的博客
10-27 1万+
1.Vue3.0六大特点 性能比Vue2.x快1.2~2倍 原因1： diff方法优化： vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较） vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容 原因2：静态提升 vue2无论元素是否参与更新，每次都会重新创建然后再渲染 vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可 原因3：时间
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 509
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
shijialeya
05-18 396
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
最新发布
SongZhengxing_的博客
05-18 181
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
Vue3 为何比 Vue2 快
07-04
Vue3 比 Vue2 快的原因有以下几点： 1. 响应式系统的优化：Vue3 使用了 Proxy 代理对象来实现响应式系统，相比 Vue2 的 Object.defineProperty，Proxy 的性能更高效。这使得 Vue3 在追踪数据变化时更快。 2. 编译优化：Vue3 引入了基于模板的编译器，通过对模板的静态分析和优化，可以生成更高效的渲染函数。这些优化包括静态节点提升、事件侦听器的缓存等，减少了运行时的开销。 3. 虚拟 DOM 的改进：Vue3 的虚拟 DOM 算法进行了优化，采用了更高效的 diff 算法，减少了不必要的 DOM 操作。同时，Vue3 也引入了片段（Fragment）和静态节点的概念，减少了不必要的渲染。 4. 更小的包体积：Vue3 在体积上进行了优化，去除了一些不常用的 API，并采用了 Tree-shaking 技术，使得最终打包的代码更小。 综上所述，Vue3 在响应式系统、编译优化、虚拟 DOM 和包体积等方面进行了改进和优化，因此相比 Vue2 有更好的性能表现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值