Vue2.x 与及Vue 3.x都已经出来很久了,种种原因,它们的区别一直没搞太明白,今天就通过这篇文章给大家梳理一下Vue3.0升级过后带来了哪些新特性以及这些性变化带来的各方面性能或者代码质量的提升。
这里占用大家一杯奶茶的时间,反正不花钱,看了没收获的评论区怼我便是。
compiler-* 编译相关的代码
reactivity:数据响应式系统,可以独立使用。
runtime-* 运行时相关的代码
server-render:用于服务端渲染;
shared:vue内部使用的一些公共的API
size-check:一个私有的包,不会发布到npm。它的左右时在构建时tree-shaking之后检查包的大小。
template-explorer:在浏览器中运行的实时编译组件,它会输出render函数,该包里面提供了在线访问的地址,我们后面会用到的。
vue:它是用来构建完整版的vue,依赖与compiler和runtime。
与Vue2.x类似,Vue3.0在构建大的时候都构建了不同的版本,可以在不同的场合下使用。
与Vue2.x不同的是,Vue3.0中不再构建umd模块化的方式。因为umd模块化的方式会让代码有更多的冗余,它要支持多种模块化的方式。
Vue3.0的构建版本中,把 cjs、ES Module 和 自执行函数(IIFE)的方式分别打包到了不同的文件中。在packages/vue
目录的dist中存放了vue 3的所有构建版本。
可分为四大类:
vue.cjs.js
和生产版本的vue.cjs.prod.js
vue.global.js
和 vue.global.prod.js
都是完整版的vue,包含运行时和编译器。vue.runtime.global.js
和vue.runtime.global.prod.js
它两是只包含运行时的构建版本。
的方式来导入这些模块。
vue.esm-browser.js
和 vue.esm-browser.prod.js
都是ESModule模块化方式的完整版的vue,包含运行时和编译器。vue.runtime.esm-browser.js
和vue.runtime.esm-browser.prod.js
它两是ESModule模块化方式的只包含运行时的构建版本。import
导入runtime-core
。
runtime-compiler
。vue 2.x在开发中小型项目的时候已经很好用,但是使用vue2.x在开发需要长期迭代和维护的大型项目的时候,也会有一些限制。在大型项目中, 可能会有一些功能比较复杂的组件,我们在看他人开发的组件的时候,可能会很难看懂,原因是vue2.x版本的组件开发采用的是Options API
。
Options API
Composition API
:
useMousePosition(){...}
其他组件也可以直接使用这个函数所封装的功能,只需要把该方法useMousePosition(){...}
提取到一个模块中,然后再在其他组件中导入即可。useSearch(){...}
的函数,将来哪个组件需要,只需要在哪个需要的组件的setup函数中来调用这些use*函数。Vue 3.0
中既可以使用Options API
也可以使用 Composition API
。Composition API
对于Vue 3.0来说只是一种新增的API,并没有把Vue2.x的 Options API
的代码编写方式抛弃。 你可以根据自己的喜好以及团队的约定来选择使用哪种方式。Composition API
,会更方便一些。Composition API
是vue 3.0新增的,Composition API
可以更合理组织组件内部的代码结构,还可以把一些逻辑功能从组件中提取出来,方便其他组件重用。其实,这里可以思考个问题,options API
是不是本来也可以这样拆分,再在整体export default 的时候进行object merge?
那么可否认为这个Composition API就是在做的这件事,把代码按逻辑划分函数化输出结果,最后在setup的时候进行合并。
响应式系统升级
Vue.set()
来处理。编译优化
通过优化编译的过程,和重写虚拟DOM提升了渲染的性能。让首次渲染和组件更新的的渲染有了大幅度的提升。
vue2.x中通过标记静态根节点,优化了diff的过程。而其静态节点还需要进行diff,这个过程没有被优化。
Vue3.0中标记和提升所有的静态根节点,diff的时候只需要对比动态节点内容
patch flag: 将来在diff的时候会跳过静态根节点,只需要去更新patch flag所指示的动态节点中的内容。这大大提升了diff的性能。
源码体积优化
通过优化源码的体积,和更好的tree-shaking的支持,减少了打包的体积。