vue 3响应式系统以proxy代理+weakmap三级依赖映射+ref/reactive分治策略为核心，实现低侵入、高可控、可回收的声明式数据绑定。
Vue 响应式系统不是一套孤立的工具，而是贯穿整个框架运行时层的核心引擎。它的架构设计围绕“低侵入、高可控、可回收”三大目标展开，从数据劫持方式、依赖管理结构到内存生命周期，每一层都服务于声明式开发体验与工程稳定性之间的平衡。
Proxy 代理层：统一拦截与语义安全
Vue 3 彻底弃用 Object.defineProperty，转而基于 Proxy 实现对象级代理。这种设计不再逐个定义属性，而是对整个 target 对象建立一层拦截屏障，能自然捕获新增属性、数组索引赋值、Map/Set 操作等 Vue 2 无法覆盖的场景。关键在于 Proxy handler 中的 get/set 操作始终配合 Reflect 执行默认行为，既保证语言原语不被破坏，又为依赖收集（track）和触发更新（trigger）留出精准切入点。
依赖追踪层：WeakMap + Map + Set 的三级映射
响应式依赖并非扁平存储，而是采用 WeakMap
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- WeakMap 作为顶层容器：键为原始响应式对象，值为其属性依赖关系表；WeakMap 的弱引用特性确保当 target 不再被任何变量持有时，整条依赖链可被垃圾回收
- Map 按 key 组织依赖：每个属性名对应一个 Set，避免重复订阅同一 effect
- Set 存储 active effect：当前正在执行的副作用函数（如组件 render、watch 回调）会被临时注册为依赖，一旦执行完成即自动清理
ref 与 reactive 的分治策略
ref 并非 reactive 的简化版，而是针对原始类型（number/string/boolean）的专用通道：
- ref 使用 Object.defineProperty 创建 value/getter/setter 访问器属性，绕过 Proxy 不能代理原始值的限制
- 当 ref.value 是对象时，Vue 会自动调用 reactive 进行深层代理，实现透明拆包（unwrapping），让模板中可直接写
{{ count }}而非{{ count.value }} - shallowRef 则跳过自动 reactive 转换，适用于性能敏感或需手动控制响应深度的场景（如大型列表项、Canvas 状态）
只读与响应边界：props 与 shallowReactive 的设计意图
响应式不是无条件开放的能力，而是按语义施加约束：
- props 在内部由 reactive 包装，但其 Proxy handler 明确禁止 set/delete 操作，违反时仅在开发模式下抛警告，不中断执行
- shallowReactive 仅代理第一层属性，嵌套对象保持普通 JS 对象，避免过度代理带来的初始化开销与内存压力
- readonly 和 shallowReadonly 提供编译期不可变契约，常用于跨组件共享配置、API 响应缓存等只读上下文
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
