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 全局污染，支持微前端场景。
九、迁移策略：一条最小可行路径
- 安装
@vue/compat，跑通现有代码； - 将高频逻辑改写为
setup+ref/reactive； - 使用
defineEmits/defineProps取代运行时props/emit； - 逐步移除兼容层，启用 Vite 或 Webpack 5 +
vue-loader@next； - 对 IE11 场景使用官方兼容性构建，或引导用户升级浏览器。
结语
Vue 3 不是简单的版本号变更，而是「范式 + 性能 + 生态」的三重升级。Proxy 驱动的响应式系统与编译期优化，让大型应用在运行时更轻更快；Composition API 与 TypeScript 深度集成，为复杂业务提供类型安全的逻辑复用方案。