Vue3.0的优化总结
1.源码优化：
a.使用monorepo来管理源码
- Vue.js2.x的源码托管在src目录，然后依据功能拆分出了compiler（模板编译的相关代码）、core（与平台无关的通用运行时代码）、platforms（平台专有代码）、server（服务端渲染的相关代码）、sfc（.vue单文件解析相关代码）、shared（共享工具代码）等目录。
- Vue.js3.0，整个源码是通过monorepo的方式维护的，根据功能将不同的模块拆分到packages目录下面不同的子目录中，每个package有各自的API、类型定义和测试。
b.使用Typescript来开发源码
- Vue.js2.x选用Flow做类型检查，来避免一些因类型问题导致的错误，但是Flow对于一些复杂场景类型的检查，支持得并不好。
- Vue.js3.0抛弃了Flow，使用TypeScript重构了整个项目。TypeScript提供了更好的类型检查，能支持复杂的类型推导；由于源码就使用TypeScript编写，也省去了单独维护d.ts文件的麻烦。
2.性能优化：
a.引入tree-shaking的技术
- tree-shaking依赖ES2015模块语法的静态结构（即import和export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。像我们在项目中没有引入Transition、KeepAlive等不常用的组件，那么它们对应的代码就不会打包进去。
b.移除了一些冷门的feature
- Vue.js3.0兼容了Vue.js2.x绝大部分的api，但还是移除了一些比较冷门的feature：如keyCode支持作为v-on的修饰符、$on，$off和$once实例方法、filter过滤、内联模板等。
3.响应式实现优化：
a.改用proxyapi做数据劫持
- Vue.js2.x内部是通过Object.defineProperty这个API去劫持数据的getter和setter来实现响应式的。这个API有一些缺陷，它必须预先知道要拦截的key是什么，所以它并不能检测对象属性的添加和删除。
- Vue.js3.0使用了ProxyAPI做数据劫持，它劫持的是整个对象，自然对于对象的属性的增加和删除都能检测到。
b.响应式是惰性的
- 在Vue.js2.x中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行Object.defineProperty把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
- 在Vue.js3.0中，使用ProxyAPI并不能监听到对象内部深层次的属性变化，因此它的处理方式是在getter中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，就没有那么大的性能消耗。
4.编译优化：
a.生成blocktree
- Vue.js2.x的数据更新并触发重新渲染的粒度是组件级的，单个组件内部需要遍历该组件的整个vnode树。
- Vue.js3.0做到了通过编译阶段对静态模板的分析，编译生成了Blocktree。Blocktree是一个将模版基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的。每个区块只需要追踪自身包含的动态节点。
b.slot编译优化
- Vue.js2.x中，如果有一个组件传入了slot，那么每次父组件更新的时候，会强制使子组件update，造成性能的浪费。
- Vue.js3.0优化了slot的生成，使得非动态slot中属性的更新只会触发子组件的更新。动态slot指的是在slot上面使用v-if，v-for，动态slot名字等会导致slot产生运行时动态变化但是又无法被子组件track的操作。
c.diff算法优化
语法api优化
a.优化逻辑组织
- 使用Vue.js2.x编写组件本质就是在编写一个“包含了描述组件选项的对象”，可以把它称为OptionsAPI。我们按照data、props、methods、computed这些不同的选项来书写对应的代码。这种方式对于小型的组件可能代码还能一目了然，但对于大型组件要修改一个逻辑点，可能就需要在单个文件中不断上下切换和寻找逻辑代码。
- Vue.js3.0提供了一种新的API：CompositionAPI，它有一个很好的机制去解决这样的问题，就是将某个逻辑关注点相关的代码全都放在一个函数里，这样在修改一个逻辑时，只需要改那一块的代码了。
b.优化逻辑复用
- 在Vue.js2.x中，我们一般会用mixins去复用逻辑。当抽离并引用了大量的mixins，你就会发现两个不可避免的问题：命名冲突和数据来源不清晰。
- Vue.js3.0设计的CompositionAPI，在逻辑复用方面就会很有优势了。
以上就是Vue3.0的优化总结的详细内容，更多关于Vue3.0的优化详解的资料请关注毛票票其它相关文章！