vue3 和 vue2 区别

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里面，现在说是按逻辑组成代码块，如果代码没有一点洁癖的人，维护性是一个灾难。按逻辑分类的效果也没有达到预期，因为总有一些数据是横跨在各个分类的。