Vue3带来了显著的性能提升，包括41%的打包大小减少、55%的初次渲染速度加快和133%的更新速度提升。主要改进在于采用Composition API实现按需导入，提升了treeshaking效果，并全面支持typescript。Vue3的响应式API从Object.defineProperty改为使用Proxy，解决了Vue2中的一些限制。然而，代码风格的变化可能对代码整洁度和维护性带来挑战。Vue3的全面typescript支持和新的响应式机制为开发者提供了更强大的工具，但也需要适应新的编码习惯。
vue3 出来之后，不管是什么样的公司，不管是想体验新技术也好还是跟风也好（个人觉得跟风比重更大），只要是新开项目大都会选择 vue3，紧随而来的 vue3 和 vue2 的区别肯定是要了解。
性能提升
有一些官方数据，只是我没找到是哪里出来的：
- 打包大小减少 41%
- 初次渲染快 55%
- 更新速度快 133%
- 内存使用减少 54%
主要就是重写虚拟 dom 和 tree shaking 的优化（使用了 composition api）。
Composition API（组合式 API）
以前只要你用了 vue，不管你用没用那些 api，都还是整个引入 vue，比如没用生命周期 update，但是这个属性还是存在引入的，使用了 composition api，按需导入，更好的支持了 tree shaking。
还有一点是更好的把相关功能合并在一块，有一张图片很直观的表示：
全面支持 typescript
整个 vue3 全部是 typescript 编写，开发工具 vscode 也已经有了各种插件支持整个 typescript 的开发。
响应式api改变
vue2使用的是Object.definepropert：
- 必须递归监听所有属性，新增属性无法监听（$set）
- 数组下标和长度变化无法监听（采用对数据进行劫持 结合发布订阅模式来实现）
- 兼容性好
vue3使用Proxy：
- 懒监听，只监听第一层，当你调用到才监听之后的数据（赋值的时候obj.a = 2,obj.a会先get获取）
- 新增属性和数组新增修改可以直接监听
- 不兼容IE11
这是几个比较大的改变，其他小改变就很多了，比如新增了组件，api使用的改变，做了很多优化，v-if和v-for的优先级，dom diff算法优化等。
说说代码风格的体验吧，有点太放飞了。以前固定好数据写在data里面，方法写在methods里面，现在说是按逻辑组成代码块，如果代码没有一点洁癖的人，维护性是一个灾难。按逻辑分类的效果也没有达到预期，因为总有一些数据是横跨在各个分类的。
欢迎关注个人订阅号 coding个人笔记
扫一扫
2155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
