跳到主要内容

Vue 3 核心变化

Vue 3 的变化，不只是多了一套 Composition API。更准确的说法是：它把状态组织、逻辑复用、类型支持、编译优化和运行时边界都重新整理了一遍。

Composition API​

Composition API 的真正价值，不在于把 data、methods、computed 改写成几个函数，而在于它把“按功能组织代码”变成了一等公民。

传统 Options API 在小组件里很好用，到了复杂页面就容易散：

  • 表单逻辑在一块
  • 请求逻辑在一块
  • 生命周期在一块
  • 校验逻辑又在另一块

Composition API 让同一件事可以收在一起。

为什么这件事重要​

它解决的是几个非常具体的问题：

  • 复杂组件逻辑分散
  • mixin 来源不清楚
  • 命名冲突不好控
  • 类型推断体验一般
  • this 上下文心智负担重

生命周期映射​

Vue 3 仍然保留 Options API 生命周期，但组合式写法里更常见的是这些钩子：

  • onMounted
  • onUpdated
  • onUnmounted
  • onActivated
  • onDeactivated
  • onErrorCaptured
  • onServerPrefetch

真正值得记的是：逻辑已经不需要再围着组件选项面板去组织了。

setup() 和 <script setup>​

setup() 是 Composition API 的入口，<script setup> 则是这套写法真正进入主流的关键。

现在看 Vue 3，实际项目里最常见的形态已经是：

  • <script setup>
  • ref / reactive
  • computed
  • watch
  • composables

响应式系统升级​

Vue 2 的响应式基于 Object.defineProperty，Vue 3 换成了 Proxy。

这带来的变化很实在：

  • 对对象新增和删除属性的追踪更自然
  • 数组下标和长度变化处理更完整
  • Map、Set 等结构也能进入响应式系统

编译优化​

Vue 3 的性能提升不只来自响应式系统，还来自编译阶段更积极的优化：

  • Patch Flag
  • 静态提升
  • Block Tree
  • 事件监听缓存

也就是说，Vue 3 不是单纯在运行时“算得更快”，而是尽量把很多判断提前到编译时做掉。

新内置能力​

Fragment​

组件不再只能有一个根节点。

Teleport​

把一段 UI 挂到组件树之外的 DOM 位置，弹窗、抽屉、悬浮层都很常用。

Suspense​

用于协调异步依赖和加载状态，和异步组件、异步 setup 配合时尤其常见。

Vue 3 最该带走的几个判断​

  • Vue 3 的重点不是“API 变多了”，而是组件组织方式变了
  • Composition API 解决的是复杂度和复用问题，不只是写法偏好问题
  • 编译优化和响应式升级一起构成了 Vue 3 的性能主线
  • 真正影响日常项目体验的，往往是 script setup、宏能力、SSR、Hydration、类型支持这些后续版本继续补齐的部分