【Vue源码分析】Vue3.0的优化

Vue 2.x存在的问题

1.源码自身的维护性

• 数据量大后带来的渲染和更新性能问题

2.兼容性

• 想舍弃但为了兼容一直保留的鸡肋API

VUE3的优化

源码优化

• 目的：代码易于开发和维护
• 体现在使用monorepo和TypeScript管理和开发源码

更好的代码管理方式: monorepo

• 相对于Vue.js 2.x的源码组织方式，monorepo把这些模块拆分到不同的package中，每个package有各自的API、类型定义和测试，这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码,提高代码的可维护性。
• 可独立与Vue使用，减少引用包的体积大小

有类型的JavaScript：typescript

• 编码期间可以进行类型检查，避免类型问题的错误
• 有利于定义接口类型，利于IDE对变量类型的推导
• Flow对于复杂场景类型检查支持不好

性能优化

源码体积优化

• 移除一些冷门的feature
• 引入了tree-shaking的技术

依赖ES2015模块语法的静态结构(即 import和export)
通过编译阶段的静态分析，找到没有引入的模块并打，上标记
如果你在项目中没有引入Transition、KeepAlive 等组件，那么它们对应的代码就不会打包，这样也就间接达到了减少项目引入的Vue.js包体积的目的

数据劫持优化

实现DOM功能，必须劫持数据的访问和更新，当数据改变后，为了自动更新DOM,那么就必须劫持数据的更新，也就是说当数据发生改变后能自动执行一些代码去更新DOM。

• vue如何知道更新哪一片DOM？

因为在渲染DOM的时候访问了数据，所以可以对它进行劫持，这样在内部建立了依赖关系，也就知道数据对应的DOM是什么了

• vue3采用Proxy API进行数据劫持

注意：Proxy API并不能监听到内部深层次的对象变化，因为VUE3的处理方式是在getter中去递归响应式。好处是：真正访问到的内部对象才会变成响应式，而不是无脑递归，从而提升性能。

编译优化

• 通过在编译阶段优化编译的结果，编译生成了Block tree，实现运行时patch过程的优化
• 对slot的编译优化、事件侦听函数的缓存优化、重写diff算法

Block tree

• Vue.js 2.x的数据更新并触发重新渲染的粒度是组件级的，但是在单个组件内部依然需要遍历整个vnode树
• Block tree是一个将模版基于动态节点指令切割的嵌套区块,每个区块内部的节点结构是固定的,每个区块只需要以一个Array来追踪自身包含的动态节点
• 借助Block tree, Vue.js 将vnode更新性能由与模版整体大小相关提升为与动态内容的数量相关

语法API优化：composition API

优化逻辑组织

就是将某个逻辑关注点相关的代码全都放在一个函数里
这样当需要修改一个功能时，就不再需要在文件中跳来跳去

优化逻辑的复用：mixins

当组件中存在大量的mixins后，会存在命名冲突和数据来源不清晰问题，组合式API解决了上述俩个问题