Vue 3.6 内核探秘：从 Alien Signals 到 Vapor Mode

Vue 3.6 做了两件会改变你写法的事：响应式换成了 Alien Signals，渲染多了一条 Vapor Mode（不走虚拟 DOM）。

这不是版本号加一。它意味着"改一个 ref 之后到底有多少工作被触发"这个问题，答案变了。

flowchart TB
  T[模板] --> COMP
  subgraph COMP [编译器全链路]
    direction LR
    P[Parse<br/>字符串 → AST] --> TR[Transform<br/>转换插件]
    TR --> CG[Codegen]
  end
  CG -->|默认| VD[VDOM 渲染<br/>patchKeyedChildren<br/>Block Tree + PatchFlag]
  CG -->|Vapor| VP[Vapor 渲染<br/>直接生成 DOM 操作]
  subgraph RE [响应式 · Alien Signals]
    direction LR
    R1[reactive / ref] --> R2[track 依赖收集]
    R2 --> R3[trigger 触发]
    R3 --> R4[computed 惰性求值]
  end
  RE --> VD
  RE --> VP
  VD --> SCH[调度器<br/>Pre / Post 队列 · 递归保护]
  VP --> SCH

为什么两条渲染路径要一起讲。 Vapor 不是把 VDOM 换掉那么简单——它和 VDOM 组件要能互操作，还要和响应式系统深度整合。第 9 章把这些边界、限制和性能实测都摊开，包括它做不到的事。

读完你能做到什么

说清一次 ref.value = x 之后发生了什么。 reactive() 的五大 Proxy 拦截陷阱、ref 为什么需要 .value、track 与 trigger 的完整流程、computed 的惰性求值、集合类型怎么特殊处理（第4章、第5章）。
理解 Alien Signals 这一代与前两代的差别。 Vue 响应式的三代实现、细粒度与粗粒度的分野，以及与 MobX / Solid Signals / Svelte Runes 的横向对比（第3章响应式哲学、第6章 Alien Signals）。
看懂模板是怎么变成渲染函数的。 Parse → Transform → Codegen 三阶段、核心转换插件、静态提升（第7章编译器总览、第8章模板编译）。
掌握 Vapor Mode。 编译器架构、Codegen 生成的 DOM 操作、精准更新引擎、控制流实现、与 VDOM 的互操作、性能实测，以及它的限制与权衡（第9章 Vapor Mode）。
读懂 Diff 算法。 patch 入口、patchKeyedChildren 的核心算法、Block Tree 与 PatchFlag 这套编译时优化、静态提升、复杂度分析（第11章 VDOM 与 Diff）。
搞清更新的时序。 生命周期钩子的注册与触发、调度器的 Pre/Post 队列、递归保护、组件更新的完整时序（第10章组件系统、第12章生命周期与调度器）。
理解生态是怎么搭在内核上的。 依赖注入与插件、Pinia、Router、SSR，以及性能优化的落点（第14章 DI 与插件、第15章 Pinia、第16章 Router、第17章 SSR、第18章性能）。

适合谁读

高级前端开发者：有 Vue 使用经验、具备 TypeScript 基础，想知道响应式和模板编译到底是怎么实现的（第4章 @vue/reactivity 源码深度剖析（上）、第8章模板编译深度剖析）。
框架架构师：Alien Signals 与 Vapor Mode 是 Vue 3.6 两处根本性的改动，值得单独评估（第6章 Vue 3.5 Alien Signals、第9章 Vapor Mode）。
开源贡献者：想读懂 Pinia 与 Vue Router 的内核，再往上游提 PR（第15章状态管理：Pinia 内核、第16章 Vue Router 内核）。

不适合：找 Vue 用法教程的读者——这里从第 3 章开始就在读源码。

源码版本

本专栏分析的是 Vue 3.6 这一支——Alien Signals 响应式系统与 Vapor Mode。需要说明的是：截至本专栏写作时，3.6.0 正式版尚未发布，vuejs/core 上最新的是预发布标签。

仓库	版本	说明
vuejs/core	3.6 预发布线（当时最新为 `v3.6.0-rc.4`）	`packages/reactivity`、`packages/runtime-vapor` 仍在收敛

git clone https://github.com/vuejs/core.git
cd core && git tag -l 'v3.6.*'   # 取当时最新的 3.6 标签

正是因为这一支还在变动，正文以机制、文件路径和函数名为锚点，而不是行号——effect.ts 里 ref / computed / effect 那条链的结构是稳定的，具体行号在 rc 之间就会变。正式版发布后如有实现层面的调整，会在对应章节标注。

开始阅读

从前言开始你的学习之旅。

版权声明

欢迎分享本专栏的链接。引用少量内容用于评论、教学或研究时，请署名 杨艺韬 并附上原文链接。

Vue 3.6 内核探秘：从 Alien Signals 到 Vapor Mode

读完你能做到什么

适合谁读

源码版本

目录

第一部分：开篇

第二部分：响应式内核

第三部分：编译器内核

第四部分：运行时内核

第五部分：核心功能深度剖析

第六部分：工程与生态

开始阅读

版权声明