读 Vue3 源码之前，先把整体切分弄清楚，后面看具体实现才不至于迷路。仓库里包很多，但核心职责就三块：响应性负责「数据变了要通知谁」，运行时负责「拿虚拟 DOM 生成和更新真实 DOM」，编译器负责「把模板转成能执行的 render 函数」。

分这三层是有明确原因的：编译器只在构建阶段（或运行时首次编译模板）工作，产物是 render 函数；运行时不关心你的模板长什么样，只认 render 函数返回的虚拟节点；而响应性完全不知道 DOM 的存在，它只做依赖收集和触发。三者之间靠约定好的产物衔接，所以可以单独替换——这也是为什么能有 runtime-only 构建版本（把编译搬到构建期，体积更小），以及为什么 @vue/reactivity 能脱离 Vue 单独用在别的框架里。

三大模块

1. 响应性：reactivity
2. 运行时: runtime
3. 编译器: compiler

三者的关系

用最小的一个组件就能把三者串起来看：reactive 创建的 proxyTarget 属于响应性模块；<template> 里那段插值由编译器处理，编译成一个读取 proxyTarget.name 的 render 函数；运行时把这个 render 函数包进一个副作用（effect）里执行，执行时读属性触发依赖收集，把这个副作用登记到 name 的依赖集合上。

之后 name 一变，响应性模块通知到这个副作用，副作用重新执行 render 得到新的虚拟节点，运行时再做 diff、更新真实 DOM。整条链路的枢纽就是「render 函数被包成副作用」这一步——它把响应性和运行时缝在了一起。

<template>
  <div>{{ proxyTarget.name }}</div>
</template>

<script>
import { reactive } from 'vue';
</script>