vue3版本发布时间是2020年9月19日,刚发布的时候一些vue3的相关插件和组件库还不是很完善,现在经过一两年的维护和更新比较稳定了,已将vue3作为vue cli的默认版本。而且AntDesignVue,Element-Plus都提供了对vue3的支持。
vue3版本兼容vue2,基础概念一模一样的,可能就是几个API不同。
vue3优点:更好的性能,更小的包体积,更好的TS集成,更优秀的API设计。

vue3带来的变化(源码)

1.源码的管理方式:通过monorepo的形式来管理源代码
主要是将许多项目的代码存储在同一个repository中;
这样做的目的是:多个包本身相互独立,可以有自己的功能逻辑,单元测试等,同时又在同一个仓库下方便管理;
而且模块划分的更加清晰,可维护性,扩展性更强;

2.源码使用ts来进行重写
在vue2的时候,vue使用flow来进行类型检测;
在vue3的时候,vue的源码全部使用ts来进行重构;

vue3带来的变化(性能)

1.使用proxy进行数据劫持
在vue2的时候,vue2是使用object.defineProperty来劫持数据的getter和setter方法的;这种方式的缺点是 当给对象添加或者删除属性时,是无法劫持和监听的;
所以在vue2的时候,提供了一些特殊的API,例如Vue2用什么版本的axios vue哪个版本好_vue.jsdelete,事实上都是一些hack方法;
在vue3开始,是使用proxy来实现数据的劫持:
删除了一些不必要的api:
移除了实例上的Vue2用什么版本的axios vue哪个版本好_javascript_02off和$once;
移除了一些特性:如filter,内联模板等;
包括编译方面的优化:
生成Block tree,slot编译优化,diff算法;

vue3带来的变化(新的API)

1.由 options API 到 composition API:

在vue2的时候是通过options Api来描述组件对象;
options API包括data,props,methods,computed,生命周期等这些选项;
这个API有个小缺陷是:多个逻辑可能是在不同的地方
比如created中会使用某一个method来修改data的数据,代码的内聚性很差;
compositionAPI可以将相关联的代码放在同一处进行处理,就不需要在多个options之间寻找;
Hooks函数增加代码的复用性:
在vue2的时候,通常通过mixins在多个组件之间共享逻辑;
缺陷是:mixins是由一大堆的options组成的,并且多个mixins会存在命名冲突的问题;
在vue3中,可以通过Hooks函数,来将一部分独立的逻辑抽取出去,并且他们可以做到响应式;