Vue.js 3.0 的优化

[MaMaFish]

Vue.js 3.0 的优化

源码的优化

1. 更好的代码管理方式：monorepo
   monorepo将代码根据不同的功能拆分到package下不同的子目录中，功能划分更明确，提高了代码的可维护性。
   一些模块可以直接独立于Vue.js使用，使用方面更加灵活。
2. TypeScript

性能优化

1. 源码体积优化
   • 移除一些冷门的 feature。
   • 利用 tree-shaking 技术减少打包体积。如果你在项目中没有引入 Transition、KeepAlive 等组件，那么它们对应的代码就不会打包，这样也就间接达到了减少项目引入 Vue.js 包体积的目的。
2. 数据劫持优化
   在Vue1.x和Vue2.x中都是通过Object.defineProperty去劫持数据的getter和setter，具体是这样：

Object.defineProperty(data, 'a',{
  get(){
    // track
  },
  set(){
    // trigger
  }
})

这样操作会有两个缺陷：

• 必须预先知道要拦截的key是什么，所以它不能监测到对象属性的添加和删除。尽管Vue.js提供了$set和$delete来解决这个问题。
• 对于嵌套层级较深的对象，需要递归遍历这个对象，并执行Object.defineProperty把每一层对象变成响应式的，会有相当大的性能负担。

export default {
  data: {
    a: {
      b: {
        c: {
          d: 1
        }
      }
    }
  }
}

为了解决上述两个问题，Vue3.0使用Proxy API做数据劫持

observed = new Proxy(data, {
  get() {
    // track
  },
  set() {
    // trigger
  }
})

因为劫持的是整个对象，所以对于对象属性的添加和删除都能监测到。
但是Proxy API并不能监听到内部深层次的变化，因此 Vue.js 3.0 的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归。
3. 编译优化
通过编译阶段对静态模板的分析，编译生成了 Block tree。借助 Block tree，Vue.js 将 vnode 更新性能由与模版整体大小相关提升为与动态内容的数量相关。

语法API优化：Composition API

1. 优化逻辑组织
   Composition API将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去。
2. 优化逻辑复用
   Vue2.x中的Mixin会有命名冲突和数据来源不清晰两个问题。Composition API很好得解决了这个问题。

引入RFC：使每个版本改动可控