Vue 3 概览

Vue2 和 Vue3 对比

虽然 Vue2 几乎能满足日常开发的所有需求，但是在作者看来还是有很多需要解决的痛点：源码自身的可维护性、数据量大后代码的渲染和更新的性能问题，一些想舍弃但是为了兼容一直保留的鸡肋 API 等。另外作者还希望能给开发人员带来更好的开发体验，例如：更好的 TypeScript 支持，更好的逻辑复用实践

Vue2 的 Options API 和 Vue3 的 Composition API

Options API

  • 选项式的 api，相关代码必须写在规定的选项中，导致相同功能的代码被分割，代码量上来后查找相关代码很麻烦，后期维护修改难度较大

  • 数据都挂载在同一个 this 下，对 TypeScript 的支持不友好，类型推断很麻烦

  • 逻辑代码的复用能力很差

Composition API

  • 更灵活的代码组织：组合式 api，代码定义很自由，相同功能代码整合到一起，查找修改都很方便

  • 更好的逻辑复用：公共代码的复用很简单，不同功能的代码也可以自由组合

  • 更小的生产包体积：Vue 相关的 api 都是通过 import 导入的，打包的时候很友好

  • 更好的类型推导

从 Options API 到 Composition API ，不仅仅是语法的改变，也是关注点的转变。Options API 指的是选项，是组件的选项，关注的重点在组件上面。而 Vue3 的 Composition API 是功能的组合，或者说是数据的组合，关注的重点在数据上面，从 Options 到 Composition 就是从组件到数据的转变。

Vue 的作者可能更希望的是研发人员将主要的关注放在数据逻辑的处理上面，围绕通过数据来驱动的核心，而不能因为组件限制了数据的流通。

Vue 3 一些变更

  • 全局的操作不再使用 Vue 实例，而是使用通过 createApp 创建的 app 实例

  • 全局和内部的 API 已经被重构，需要使用 import 导入，并且支持 tree-shaking

Vue2 要不要升级到 Vue3

Vue3 确实是好的，项目应不应该升级却不一定，升不升级还是要根据项目的实际情况来决定。

从 2.x 升级到 3.0 不仅项目代码要修改，所依赖的周边生态也需要升级。这其实是一个相当大的工作量，也需要承担一定的风险，所以如果你的项目非常庞大且已经相对稳定，没有什么特别的痛点，那些升级要慎重。

  • 新项目不需要兼容 IE11 —— 可以直接使用 Vue3

  • 需要兼容 IE11 —— 不能升级，需要 Vue2.x 的版本，如果想体验 Composition API，可以使用 Vue2.7 版本

  • 重度依赖某个第三方组件 —— 需要视第三方组件是否支持 Vue3 来决定是否升级

  • 项目需要长期支持（2 年起步），且高频维护 —— 可以考虑升级 Vue3

如果要升级可以考虑使用 @vue/compat 或者 GOGOCode 辅助。

Vue 3 diff 算法

更 Vue2 的双端 diff 算法不同，Vue3 采用的是最长递增子序列来作为 diff 的主要方式

PreviousVue3 源码 — 组件详解NextVue.js 源码 — Props 详解

Last updated

Was this helpful?