响应式系统重构

  • Vue2：基于Object.defineProperty实现响应式，依赖收集在getter触发时进行。
  • Vue3：采用Proxy替代Object.definedProperty，支持更全面的响应式追踪（数组索引，对象属性添加删除），性能更优。

API架构升级

  • Vue2：使用Options API，逻辑分散在data、methods等选项中，代码复用依赖mixins，易引发命名冲突。
  • Vue3：引入Composition API，通过setup()函数组织逻辑，支持功能分组（如ref、reactive），提升代码复用性和可维护性。

性能优化

  • 渲染速度：Vue3优化虚拟DOM算法，引入静态节点提升（静态内容仅渲染一次）和Block概念，减少更新范围，渲染速度提升约20%。
  • 体积：核心库体积减小40%（压缩后约10k），支持Tree Shaking，未使用的API可被移除，最终打包文件更小。

模板与组件语法

  • 多根节点支持：Vue3允许组件模板有多个根元素（通过虚拟包裹节点实现），而Vue2仅支持单个根元素。
  • 新组建特性：Vue3新增Teleport组件（跨节点渲染）和Fragment（多元素容器），而Vue2无此功能。

TypeScript支持

  • Vue 3：深度集成 TypeScript，提供更精准的类型推断和类型声明，开发体验更优⁠⁣。
  • Vue 2：TypeScript 支持需额外配置，类型系统不够完善⁠⁣。

生命周期钩子与代码结构

  • Vue 2：钩子函数以选项形式定义（如 created、mounted）。
  • Vue 3：钩子函数改用 onXXX 命名（如 onMounted），并通过 Composition API 集中管理逻辑⁠。

模块化和生态

  • Vue3：支持按需引入API（如import {ref} from ‘vue’），减少冗余代码。
  • Vue2：需全局引入核心API，无法通过Tree Shaking 优化。