区别:
数据双向绑定
VDOM(虚拟DOM)
Fragments
Tree-Shanking的支持
Composition API
数据双向绑定
以前有介绍过 Vue2和Vue3响应式区别_思ۣۖิิۣۖิ❧❦空❧❦的博客-CSDN博客
VDOM
在vue2中,每次更新真实DOM之前都是对虚拟DOM全量对比 vue3中则是只对比带有标记的,这样大大的减少了非动态内容的对比消耗
可以去 Vue Template Explorer 查看如何标记
Fragments
vue2在template下只能有一个子节点,而vue3可以有多个
同时支持render函数和JSX写法,类似于react中,在render函数里写逻辑代码
Tree-Shanking
相对于vue2来说,减少了打包体积。比如项目当中使用了watch,没有使用computed,那么vue3中就是按需导入watch,再使用,打包时只会打包watch,不会打包compted,而vue2中的实例是单例的,捆绑程序无法检测到当前对象的哪些属性被使用到
Composition API
Vue3 中新增的功能,它的灵感来自于 React Hooks ,是比 mixin 更强大的存在。
可以提高代码逻辑的可复用性,从而实现与模板的无关性;同时使代码的可压缩性更强。另外,把 Reactivity 模块独立开来,意味着 Vue3.0 的响应式模块可以与其他框架相组合。
如上图,composition-api 把复杂组件的逻辑抽地更紧凑,而且可以将公共逻辑进行抽取。