Vue 3 不是「加量版」Vue 2，而是一次底层重写与范式革新。它保留了熟悉的模板语法，却在编译器、运行时、响应式系统、TypeScript 支持等维度做了系统性升级。

一、源码组织：从 Flow 到 TypeScript 的彻底重写

Vue 2 使用 Flow 进行类型检查，类型定义散落在独立声明文件中；Vue 3 则完全使用 TypeScript 编写源码，类型即实现，实现即类型。

带来的直接收益：

• 框架内部即可获得完整类型推导；
• 用户侧无需额外安装 @vue/types，即可获得零配置的 DX 提升；
• 为后续 Volar、vite-plugin-vue 等工具链提供了可静态分析的基础。

二、编程范式：Options API → Composition API

Options API 在中小型组件中表现良好，但逻辑一旦分散在 data、methods、computed、watch 中，就难以聚合。

Composition API 用「函数组合」取代「配置对象」：

• 通过 ref、reactive、computed、watch 等粒状 API 将逻辑封装为可复用的 composable；
• 同一功能域代码可合并为一块「垂直切片」，降低认知负荷；
• 利用 TypeScript 泛型，实现类型安全的跨组件逻辑复用。

迁移提示：

旧代码无需一次性重写，setup() 可与 Options API 共存，渐进式迁移即可。

三、响应式系统：Object.defineProperty → Proxy

Vue 2 用 defineProperty 拦截已有属性，无法追踪动态新增或删除的 key；对数组需要额外包裹重写七个原型方法。

Vue 3 引入 Proxy：

• 一次性代理整个对象，新增/删除属性自动可追踪；
• 数组索引、length 变更天然响应；
• 内存占用更低，触发路径更短，性能提升 1.5–2 倍。

副作用：

Proxy 无法 polyfill，Vue 3 最低支持 ES2015；IE11 需要官方兼容性构建，但社区已转向现代浏览器。

四、编译优化：静态提升与 Patch Flag

Vue 2 的 diff 在运行时标记静态根节点，减少对比范围；Vue 3 在编译阶段就把所有静态节点提升到渲染函数外部，并在动态节点上附加 patch flag。

结果：

• 运行时只对比动态内容，静态部分完全跳过；
• 组件更新粒度从「整颗 VNode 树」缩小到「具体动态节点」，减少 30–50 % 的 diff 耗时；
• SSR 场景下，静态字符串可一次性输出，无需 hydration。

五、打包体积：按需打包

Vue 3 通过 Tree-Shaking 友善导出与特性移除，实现「按需打包」：

• 删除的 API：filters、inline-template、v-on.native、Vue.set（对 Proxy 不再必要）；
• 核心运行时 gzip 后约 13 KB，比 Vue 2 减少 40 %；
• 新增 @vue/compat 构建，提供 99 % 兼容层，方便灰度迁移。

六、生命周期：setup 的接管范围

Options API 中 beforeCreate 与 created 被 setup() 统一替代：

• setup 在 props 解析之后、组件实例创建之前 运行，意味着 this 不可用；
• 所有逻辑直接操作 props、context，避免 Vue 2 中常见的「访问未挂载数据」陷阱；
• 其余钩子（onMounted、onUpdated 等）以 onXxx 形式提供，可在 setup 内部多次调用，便于组合式逻辑复用。

七、模板语法：多根节点与 Fragments

Vue 2 模板必须包裹单一根标签，导致无意义的 <div> 嵌套；Vue 3 支持 Fragments（多根节点）：

• 减少 DOM 层级，提升可访问性与样式隔离；
• 与 Teleport、Suspense 一同构成「区域渲染」能力，支持弹窗、抽屉、骨架屏等高级场景。

八、周边生态：实例化 API 的演进

• Vuex → Pinia：createStore 取代 new Store，类型推断一步到位；
• Vue Router 4：路由实例通过 useRouter() / useRoute() 获取，this.$router 成为历史；
• 全局 API：Vue.createApp() 创建独立应用实例，避免 Vue 2 全局污染，支持微前端场景。

九、迁移策略：一条最小可行路径

1. 安装 @vue/compat，跑通现有代码；
2. 将高频逻辑改写为 setup + ref/reactive；
3. 使用 defineEmits/defineProps 取代运行时 props/emit；
4. 逐步移除兼容层，启用 Vite 或 Webpack 5 + vue-loader@next；
5. 对 IE11 场景使用官方兼容性构建，或引导用户升级浏览器。

结语

Vue 3 不是简单的版本号变更，而是「范式 + 性能 + 生态」的三重升级。Proxy 驱动的响应式系统与编译期优化，让大型应用在运行时更轻更快；Composition API 与 TypeScript 深度集成，为复杂业务提供类型安全的逻辑复用方案。