Vue3.0主要做了哪些优化

21 阅读2分钟
  1. 源码优化
  • 更好的代码管理方式,代码库中各功能区分得更加细致,责职分工更加明确
  • package 是可以独立于 Vue.js 使用的,例如 reactivity 响应式库能力,可以单独依赖这个响应式库而不用依赖整个 Vue.js 减少了引用包的体积大小,在 Vue.js 2.x 是做不到这一点的
  • 使用了类型语言 TypeScript 重构项目
  1. 性能优化
  • 移除了一些冷门的 feature,引入 tree-shaking 的技术(在打包中只会引入使用了的代码,从而减少了打包后代码的体积)

3.数据劫持优化

  • 数据响应式处理放弃使用 Object.defineProperty,改用 new Proxy 监听整一个对象。原因是 Object.defineProperty 不管是否遇到有嵌套层级的对象,都需要无脑递归对象,逐层监听对象,对性能损耗过大。而采用 Proxy 后,只有在真正遇到有嵌套层级的对象的时候,才会在 getter 的时候逐层递归,对每一个对象进行监听处理,在很大程度上提升了性能。

4.编译优化

  • petch 函数优化;通过编译阶段对静态模版的分析,编译生成了 Block tree
    • Block tree 是一个将模板基于动态节点指令切割的嵌套区块,每个区块内部的节点结构是固定的,每个区块只需要以一个 Array 来追踪自身包含的动态节点
    • 借助 Block tree,Vue.js 将 vnode 更新性能由与模板整体大小相关提升为与动态内容的数量相关
  • 在编译阶段还包含了对 Slot 的编译优化、事件侦听函数的缓存优化,并且在运行时重写了 diff 算法

5.语法 API 优化:Composition API

  • 优化了逻辑组织
    • Oprion API:当组件小的时候,这种分类方式一目了然;但是在大型项目中,一个组件可能有多个逻辑关注点,每一个关注点都有自己的 Options,当需要修改某一个逻辑关注点时,就需要在单个文件中不断上下切换和寻找
    • Composition API:将某个逻辑关注点相关的代码全部放在一个函数里,这样当需要修改一个功能时,就不再需要在文件中翻来覆去