vue2 与 vue3 的区别
1.响应式系统
Vue2 使用的 Object.defineProperty()实现响应式系统,这种方法有诸多限制,无法属性的添加、删除。无法对数组长度或索引变化直接进行处理。
Vue3 使用了 Proxy 实现响应式系统,该方法允许 vue 拦截对象任何属性的读写操作,当然也能够拦截到属性的添加和删除操作,以及数组的长度或索引变化。
2.组合式 API
Vue2 选项式 API(如 data methods computed watch 等) 在哪个版本引入了组合式 API。
Vue3 引入了组合式 API(ref reactive effect computed),将组件的逻辑部分抽离到单独的函数中,通过组合式 API 的语法糖,可以更好的组织代码,减少代码冗余,提高代码可读性。
3.性能方面
Vue3 性能有显著的提升,包括更小的包体积,更快虚拟 DOM 更新,更高效的组件初始化等
Vue2 性能方面相对薄弱,尤其在处理大型项目和复杂组件时,性能表现并不好。
4.ts 支持
Vue3 从一开始就是使用 ts 实现的,提供了 ts 更好的类型支持。
vue2 ts 的支持是有限的,需要通过额外的配置和工具来实现更好的集成
5.新特性
Vue3 引入了诸多组件 如 teleport、fragment、Suspense 等,为开发者提供了更多的便利。
6.fragment
Vue3 支持多个根节点,并列节点
Vue2 中只能有一个根节点
7.自定义渲染器
Vue3 提供了自定义渲染器的 API,允许用户自定义自己的渲染逻辑。
8.静态元素提升
vue2 中,模板中所有元素都会被重新渲染创建一个新的虚拟节点,包括静态文本元素。
vue3 引入静态提升概念。在编译模板时,Vue3 会检测出静态内容并提升,初次渲染创建一次。后续的渲染中,静态内容被重用,减少渲染开销同样了性能。
9.虚拟节点静态标记
Vue2 更新组件时,会进行全虚拟 DOM 比较,全量比较。
Vue3 引入虚拟节点静态标记,编译时标记虚拟节点的动态部分。这样组件更新时,vue 只会标注虚拟节点的动态部分,只更新动态部分。