Vue3.0的优化总结


Posted in Javascript onOctober 16, 2020

1.源码优化:

a.使用monorepo来管理源码

  • Vue.js 2.x 的源码托管在 src 目录,然后依据功能拆分出了 compiler(模板编译的相关代码)、core(与平台无关的通用运行时代码)、platforms(平台专有代码)、server(服务端渲染的相关代码)、sfc(.vue 单文件解析相关代码)、shared(共享工具代码)等目录。
  • Vue.js 3.0,整个源码是通过 monorepo 的方式维护的,根据功能将不同的模块拆分到 packages 目录下面不同的子目录中,每个 package 有各自的 API、类型定义和测试。

b.使用Typescript来开发源码

  • Vue.js 2.x 选用 Flow 做类型检查,来避免一些因类型问题导致的错误,但是 Flow 对于一些复杂场景类型的检查,支持得并不好。
  • Vue.js 3.0 抛弃了 Flow ,使用 TypeScript 重构了整个项目。 TypeScript 提供了更好的类型检查,能支持复杂的类型推导;由于源码就使用 TypeScript 编写,也省去了单独维护 d.ts 文件的麻烦。

2.性能优化:

a.引入tree-shaking的技术

  • tree-shaking 依赖 ES2015 模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。像我们在项目中没有引入 Transition、KeepAlive 等不常用的组件,那么它们对应的代码就不会打包进去。

b.移除了一些冷门的feature

  • Vue.js 3.0 兼容了 Vue.js 2.x 绝大部分的api,但还是移除了一些比较冷门的feature:如 keyCode 支持作为 v-on 的修饰符、$on,$off 和 $once 实例方法、filter过滤、内联模板等。

3.响应式实现优化:

a.改用proxy api做数据劫持

  • Vue.js 2.x 内部是通过 Object.defineProperty 这个 API 去劫持数据的 getter 和 setter 来实现响应式的。这个 API 有一些缺陷,它必须预先知道要拦截的 key 是什么,所以它并不能检测对象属性的添加和删除。
  • Vue.js 3.0 使用了 Proxy API 做数据劫持,它劫持的是整个对象,自然对于对象的属性的增加和删除都能检测到。

b.响应式是惰性的

  • 在 Vue.js 2.x 中,对于一个深层属性嵌套的对象,要劫持它内部深层次的变化,就需要递归遍历这个对象,执行 Object.defineProperty 把每一层对象数据都变成响应式的,这无疑会有很大的性能消耗。
  • 在 Vue.js 3.0 中,使用 Proxy API 并不能监听到对象内部深层次的属性变化,因此它的处理方式是在 getter 中去递归响应式,这样的好处是真正访问到的内部属性才会变成响应式,简单的可以说是按需实现响应式,就没有那么大的性能消耗。

4.编译优化:

a.生成block tree

  • Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的,单个组件内部需要遍历该组件的整个 vnode 树。
  • Vue.js 3.0 做到了通过编译阶段对静态模板的分析,编译生成了 Block tree。Block tree 是一个将模版基于动态节点指令切割的嵌套区块,每个区块内部的节点结构是固定的。每个区块只需要追踪自身包含的动态节点。

b.slot编译优化

  • Vue.js 2.x 中,如果有一个组件传入了slot,那么每次父组件更新的时候,会强制使子组件update,造成性能的浪费。
  • Vue.js 3.0 优化了slot的生成,使得非动态slot中属性的更新只会触发子组件的更新。动态slot指的是在slot上面使用v-if,v-for,动态slot名字等会导致slot产生运行时动态变化但是又无法被子组件track的操作。

c.diff算法优化

语法api优化

a.优化逻辑组织

  • 使用 Vue.js 2.x 编写组件本质就是在编写一个“包含了描述组件选项的对象”,可以把它称为 Options API。我们按照 data、props、methods、computed 这些不同的选项来书写对应的代码。这种方式对于小型的组件可能代码还能一目了然,但对于大型组件要修改一个逻辑点,可能就需要在单个文件中不断上下切换和寻找逻辑代码。
  • Vue.js 3.0 提供了一种新的 API:Composition API,它有一个很好的机制去解决这样的问题,就是将某个逻辑关注点相关的代码全都放在一个函数里,这样在修改一个逻辑时,只需要改那一块的代码了。

b.优化逻辑复用

  • 在 Vue.js 2.x 中,我们一般会用 mixins 去复用逻辑。当抽离并引用了大量的mixins,你就会发现两个不可避免的问题:命名冲突和数据来源不清晰。
  • Vue.js 3.0 设计的 Composition API,在逻辑复用方面就会很有优势了。

以上就是Vue3.0的优化总结的详细内容,更多关于Vue3.0的优化详解的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
canvas绘制折线路径动画实现
May 12 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 #Javascript
利用js实现简易红绿灯
Oct 15 #Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 #Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 #Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 #Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 #Javascript
angular共享依赖的解决方案分享
Oct 15 #Javascript
You might like
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
JavaScript模拟push
2016/03/06 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
pandas实现导出数据的四种方式
2020/12/13 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
采购部岗位职责
2013/11/24 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
运动会5000米加油稿
2015/07/21 职场文书