Vue3 提升
Vue3 的提升相较于 Vue2 主要体现在4个方面:
- 源码优化
- 性能优化
- 编译优化
- 语法优化
接下来围绕这几点来简述 Vue3 的突出优势。
源码优化
代码整体架构采用 monorepo 和 TypeScript 来管理和开发源码,它的目的是让代码更易于开发和维护
相对于
Vue2.x的源码组织方式,monorepo把这些模块拆分到不同的package中,每个package有各自的API、类型定义和测试这样使得模块拆分更细化,职责划分更明确,模块之前的依赖关系也更加明确。package(比如reactivity响应式库)是可以独立于Vue.js使用的,这样用户如果只想使用Vue3的响应式能力,可单独依赖这个响应式库而不用去依赖整个Vue.js减小了引用包的体积大小,而Vue2是做不到这点的。使用
TypeScript避免时候Type类型出现的Bug,相较于Vue2.x使用的Flow.js,Ts能够提供更好的类型推导能力。
性能优化
移除冷门
Feature,比如:filter、inline-template等。引入
tree-shaking技术:依赖ES2015模块语法的静态结构(即import和export)通过编译阶段的静态分析,找到没有引入的模块并打上标记。数据劫持优化:舍弃
ObjectDefineProperty,使用Proxy。ObjectDefineProperty本身存在两点问题:- 无法拦截数组索引新增和对象属性新增value
- 对于深层级的对象结构,要对底部的属性进行劫持就需要采取深度递归的方式把每一层的数据都定义成响应式数据,如果数据过于复杂,那么就有相当大性能负担
Proxy的优势它只会劫持整个对象,注意的是,
Proxy API并不能监听到内部深层次的对象变化,因此Vue3的处理方式是 在 getter 中去递归响应式,这样的好处是真正访问到内部对象才会变成响应式,而不是无脑递归,这样无疑也在很大程度上提升了性能。
编译优化
patch优化,在Vue2中所以一个组件一旦有了动态节点变动,那么就会patch整个组件树,理想状态下只需遍历绑定动态节点的Vnode就可以。Vue3可以通过编译阶段对静态模版的分析,编译生成了Block tree。Block tree是将一个模块基于动态节点指令切割的嵌套区块,每个区块内部的节点结构是固定的每个区块只需以一个Array来追踪自身包含的动态节点,借助Block tree,将vnode更新性能由与模版整体大小相关提升为与动态内容的数量相关slot编译优化
事件侦听函数的缓存优化
在运行时重写了 diff 算法
语法优化
- 新增
Composition API
Vue2 的 OptionsAPI,当组件小的时候,这种分类方式一目了然,但在大型组件中,一个组件可能有多个逻辑关注点,但使用 Optiopns API 的时候,每一个关注点都有自己的 Options,如果需要修改一个逻辑关注点,就需要在单个文件中不断上下切换和寻找,开发的体验不会很好。Vue3 主要是提供了 Composition API,解决了这个问题,它将某个逻辑关注点相关的代码全部放在一个函数里,这样当需要修改一个功能时,就不再需要在文件中“上下横跳”了。
mixin命名冲突和数据来源不清晰,Composition API也帮我们解决了我们的问题。更好的类型支持,在调用函数时,所有的类型就被推导出来了,不像
OptionsAPI所有东西都使用this。Compostion API对tree-shaking更友好,代码也更容易压缩。
小豪的blog