⚡ 30 秒速记

• 核心判断：响应式系统由依赖收集、变更触发和调度刷新组成，关键不在“监听数据”，而在精确关联状态与副作用
• 原理主线：围绕 「源码结构」、「Vue 3初探」、「Composition API」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析Vue3的响应式原理，介绍源码结构、编译器与运行时环境的划分，并通过示例展示Vue3响应式系统的实现方式，帮助读者全面理解Vue3响应式机制的核心思想和实现细节。
• 边界与代价：Vue 2 的 defineProperty 与 Vue 3 的 Proxy 在新增属性、数组和集合类型上边界不同
• 工程落地：排查视图不更新或重复更新时，应沿读取是否被追踪、写入是否触发、任务是否被去重三段定位

Vue 3 响应式的核心，是用 Proxy 拦截对象操作，再通过 track 和 trigger 把属性与副作用精确关联起来。 effect 执行时会触发属性读取，get 据此收集依赖；属性写入或删除时，代理再找到对应依赖并重新执行。嵌套对象需要在读取时继续响应化，代理结果还应使用 WeakMap 缓存，避免重复代理。相比 Vue 2 的 Object.defineProperty，它也能处理新增、删除属性以及更多对象类型。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

源码结构

源码位置是在packages文件件内，实际上源码主要分为两部分，编译器和运行时环境

1. 编译器

• compiler-core 核心编译逻辑
• compiler-dom 针对浏览器平台编译逻辑
• compiler-sfc 针对单文件组件编译逻辑
• compiler-ssr 针对服务端渲染编译逻辑

2. 运行时环境

• runtime-core 运行时核心

• runtime-dom 运行时针对浏览器的逻辑

• runtime-test 浏览器外完成测试环境仿真

3. reactivity 响应式逻辑

4. template-explorer 模板浏览器

5. vue 代码入口，整合编译器和运行时

6. server-renderer服务器端渲染

7. share 公用方法