vue3 和 vue2 区别

2022-12-02 20:23:45 浏览数 (1)

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

0 人点赞