1. 首页
  2. Vuejs

带你看看vue3的进步

刚刚看了Vue.js作者在VueConf 2019上海的演讲视频,学习到了很多的东西。了解了vue在全球的影响力、活跃的社区以及核心开发团队,更主要的是vue2当前的一些问题和在vue3中的一些进步。下面我总结了从中学习到的几点。

vdom

1. 性能瓶颈

新vdom生成: 当数据更新时,虽然vue可以定位到最小更新粒度为组件级别,但在组件级别内,还是需要重新遍历模板生成新的vdom更新粒度不够小

diff算法:diff的工作量和组件模板大小成正相关。即使模板内只有少量的动态节点,也需要遍历整个组件去执行diff

总结vdom的更新粒度不够灵活,导致生成新的vnode和新旧vnode diff过程中,做了很多无用功,导致浪费性能.

2. 原因

vdom是从react而来的,jsx和手写的render function是完全动态的,过度的灵活性导致无法收集优化的信息,即你无法解读js的代码,来区分静态节点和动态节点。

如下图,很难识别出:只有div下的第二个p是动态节点。

带你看看vue3的进步

3. 解决方案

react时间分片

在动态节点和数据的量都很大时,那么在数据更新时,js线程就会用很长的时间来执行vdom的相关计算,如果超过了16ms,造成交互或动画等等卡顿现象。而时间分片就是vdom的大量计算分成多个小任务,保证每个小任务在16ms内执行完,从而不会阻塞用户交互,避免卡顿现象

react承认vdom的这些缺点,然后它从其他的层面来弥补缺点带来的问题。

vue缩小更新粒度

最大化利用的模板信息,把更新的粒度组件缩小到代码块

即从组件模板中提取出动态节点、动态代码块,做diff时,只需要比较这些动态区域,而忽略掉静态节点,从而提升性能。

带你看看vue3的进步

带你看看vue3的进步

带你看看vue3的进步

带你看看vue3的进步

再比如一个节点仅仅class属性为动态的,那么只需要diff这一个属性即可。进一步提升了性能。

总结:vdom的更新性能将与动态内容的数量相关,而不是模板整体大小。

function-based API

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

带你看看vue3的进步

优势1:更好的支持TS类型推导

优势2:Tree-shaking友好

常用的API valuecomputedwatch等都是从vue中使用import引进来的,所以支持tree-shaking。即如果没有使用这些api,那么这些相应的代码就不会被打包,缩小了文件大小。

优势3:代码更容易被压缩

对象属性一般是不会被压缩的,而变量名是可以被压缩的

优势4:逻辑复用

逻辑复用有很多种方案,都有一些缺点:

1. mixins

  • 命名空间冲突(多个mixins,不能保证变量名不会冲突)
  • 数据来源不清晰(多个mixins时,使用的变量就不易分辨它的来源)

2. 高阶组件

  • props命名空间冲突
  • props数据来源不清晰
  • 额外的组件实例性能消耗

3. 作用域插槽

  • 额外的组件实例性能消耗

而在vue3中逻辑复用会有不同的方式:

带你看看vue3的进步

可以发现和 react hook逻辑封装形式很像,就是在组件内定义响应式的变量,并封装变量更改的逻辑,在最后把变量暴露出来,供其他组件使用。

带你看看vue3的进步

视频地址

作者:漓漾li
链接:https://juejin.im/post/6844904019236749325

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:带你看看vue3的进步

链接:https://www.javascriptc.com/4119.html

« web Nginx 初探
瞧,这就是Vue3新增特性»
Flutter 中文教程资源

相关推荐

QR code