1.源码组织方式发生变化,采用 monorepo 的方式组织源码,任何一个单一模块都可以独立抽出来使用,比如 @vue/reactivity 可以单独提供响应式功能
2.vue2使用的是 optionsAPI,Vue3使用的是 compositionAPI(vue2.7也支持了compositionAPI)
3.响应式原理改变,vue2响应式原理是 object.defineProperty(),vue3是 proxy
4.Vue3支持 fragment,组件可以拥有多个根节点
5.性能提升
- 使用 proxy 替换 object.defineProperty 重写响应式代码。不必像vue2一样需要遍历每一个属性,为所有属性添加getter和setter,通过proxy,只需要在入口处理一次即可,同时还可以监听到属性的增减,也可以监听数组的index。为子对象添加监听放到了获取时,而不是初始化的时候,极大提高了初始化效率。(如果获取子对象,不添加proxy,会导致获取的子对象丢失响应式)
- diff算法优化。vue2中数据发生变化,会重新生成一个DOM树,并和之前的DOM树进行比较,找到不同的节点然后更新。但这比较的过程是全量的比较,也就是每个节点都会彼此比较。但其中很显然的是,有些节点中的内容是不会发生变化的,那我们对其比较就多消耗了时间。在vue3中,在创建虚拟DOM树的时候,会根据DOM中的内容会不会发生变化,添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候,就只会对比这些带有静态标记的节点。
- 在vue2中,无论元素是否参与更新,每次都会重新创建,然后再渲染。在vue3中使用了静态提升,对于不参与更新的元素,只会被创建一次,在渲染时直接服用即可。
- 默认情况下,onclick 等静态事件会被视为动态绑定,所以每次都会去追踪它的变化,但因为是同一个函数,所以是没有必要的。vue3中开启了 cacheHandlers,再次调用时,不会再从组件中取,而是直接走缓存取缓存。
6.增加了vite(vue2也可以使用)
- 基于ESM,使用golang编写,极大提高效率
- 快速冷启动
- 按需编译
- 带有模块热更新