Vue3 从 0 到 ∞：Composition API 的底层哲学、渲染管线与生态演进全景
写给经历过 Vue2 的开发者，也写给初识响应式的新同学
（零）写在前面：为什么要重学 Vue
对 Vue2 用户：Options API 到 Composition API 不是“写法变化”，而是“心智迁移”。
对 React 用户：Vue3 的 Reactivity 与 Hooks 形似神不似，读懂 Proxy 与依赖收集，才能避免“React 思维”陷阱。
对新同学：Vue3 ≈ 响应式语言 + 编译器 + 运行时 + 生态，一次学全，终身受益。
全文不贴源码，用大量伪代码与图表拆解“看似黑盒”的环节。篇幅较长，请泡好咖啡。
（一）响应式系统的三次进化
1.0 defineProperty：劫持属性级 getter/setter，数组变异方法补丁。
2.0 Proxy + Reflect：劫持对象级操作，天然支持 Map/Set、动态新增属性。
3.0 精细化依赖：依赖不再只是组件，而是组件内部的 “副作用函数” 级别。
Proxy 陷阱全览：
· get / set / has / deleteProperty / ownKeys
· 嵌套对象只在访问时递归，懒代理实现 “按需响应”。
· 数组的 index 与 length 的关系通过两次 get 一次 set 解决。
依赖收集的数据结构：
WeakMap<Target, Map<Key, Dep>>
Dep = Set<ReactiveEffect>
（二）Composition API：从 “配置” 到 “组合”
2.1 心智模型：
Options API 把逻辑拆到 data、methods、computed、watch，导致“一个功能四分五裂”。
Composition API 把“功能”作为最小组织单元，用函数封装，最终像乐高一样组合。
2.2 生命周期映射
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
…
核心区别：setup 在组件实例创建前执行，因此无法访问 this，但可返回 render 函数直接 bypass 模板编译。
2.3 ref vs reactive：
· ref 解决原始类型响应式；.value 是“拆箱”语义。
· reactive 只能代理对象；深层嵌套自动展开。
· 模板里自动拆箱 ref 是编译阶段魔法，运行时无成本。
2.4 computed & watch 的 Lazy & Scheduler
computed 的缓存策略：依赖未变直接返回，依赖变化后首次访问触发重算。
watch 的 flush: 'pre' | 'post' | 'sync' 决定副作用与 DOM 更新顺序。
（三）渲染管线：从模板到真实 DOM 的 6 个阶段
1 解析 Parse：template → AST，使用 @vue/compiler-dom，支持 v-if、v-for、slot、指令等语法糖。
2 转换 Transform：AST → JavaScript AST，做静态提升（hoistStatic）、补丁标记（patchFlag）。
3 生成 Generate：JavaScript AST → render 函数字符串，引入 openBlock、createElementVNode、createVNode 等运行时辅助。
4 运行时创建 VNode：render 函数执行得到虚拟节点树。
5 Diff & Patch：双端对比 + 最长递增子序列（LIS）优化动态子节点移动。
6 浏览器 DOM：通过浏览器 API 创建/更新/删除节点，触发回流重绘。
关键优化点：
· PatchFlag 细粒度标记：TEXT、CLASS、STYLE、PROPS、FULL_PROPS、NEED_PATCH 等。
· Block Tree：把 v-if / v-for 作为边界，减少不必要对比。
· 静态提升：纯静态节点提升到渲染函数外部，渲染时直接复用。
（四）编译时宏语法糖
4.1 <script setup>
4.2 宏 import：
import { ref } from 'vue' 自动按需引入，配合 tree-shaking，最终包体只含所用 API。
4.3 自定义块 <i18n><graphql>
（五）Teleport、Suspense、Fragments 的协同舞台
· Teleport：把子树渲染到 DOM 任意位置，保留组件上下文，解决 Modal、Drawer z-index 地狱。
· Suspense：异步组件 + 异步 setup() 的边界，提供 fallback UI，解决白屏闪烁。
· Fragments：多个根节点不再需要外层 div，减少 17% 的 DOM 节点数。
（六）生态：Vite、Pinia、Vue Router、Devtools
6.1 Vite 的 HMR 原理：
ESM 天然支持模块热替换，通过 WebSocket 推送改动模块路径，浏览器端 import 新模块并执行 accept 回调。
6.2 Pinia：
store = reactive + computed + watch 的封装。支持插件、时间旅行、SSR 水合。
6.3 Vue Router 4：
history API 抽象成三种模式（Web、Hash、Memory），路由守卫支持 async/await，实现“动态路由 + 权限”闭环。
6.4 Devtools 下一代：
Timeline 面板记录组件生命周期、事件、性能；Inspector 面板可直接修改响应式数据并回显。
（七）TypeScript 完全体
7.1 defineComponent：
对 Options API 组件推导 this，对 Composition API 组件推导 props/emits。
7.2 宏类型：
defineProps<Props>
7.3 全局声明：
通过 declare module '@vue/runtime-core' 扩展 ComponentCustomProperties，让 this.$http 在模板中智能提示。
（八）性能：从微基准到真实场景
8.1 编译优化：
SFC 编译后，静态节点字符串化，动态节点打补丁，减少 50% 运行时代码。
8.2 渲染优化：
PatchFlag + Block Tree 让 diff 时间复杂度退化为 O(n) 常数级。
8.3 内存优化：
WeakMap 自动垃圾回收，避免 Vue2 的 Dep 与 Watcher 内存泄漏。
（九）SSR & Hydration
9.1 渲染流程：
服务器 compileToFunction → renderToString → 客户端 hydrate（比对虚拟 DOM + 激活事件）。
9.2 注水失败降级：
Mismatch 时客户端重新渲染，保证页面可用。
（十）未来：Vue3.4、Vapor、VueFire
· Vue3.4：计划引入 “Vapor Mode” 实验，进一步抹平编译产物与运行时边界，实现更细粒度更新。
· VueFire：官方 Firebase 绑定，实时数据库 + Composition API 原生体验。
· Suspense SSR Streaming：边渲染边流式输出 HTML，解决 TTFB 与 FCP。