Vue 3 响应式系统基于 Proxy 拦截13种操作并配合 Reflect 执行原语，实现惰性代理、新增属性即时响应、数组索引直接修改触发更新；reactive 代理引用类型，ref 包装基本类型；数据访问触发 track 收集依赖，赋值触发 trigger 通知更新，形成细粒度响应闭环。
Vue 3 的响应式系统靠 Proxy 拦截操作、Reflect 执行原语，二者配合实现依赖收集与自动更新，不再需要遍历属性或特殊处理数组。
Proxy 是怎么接管整个对象的
Proxy 不是对每个属性单独定义 getter/setter，而是直接代理整个目标对象。所有读写、删除、in 判断、for...in 遍历等共 13 种操作，都能被统一拦截。这意味着：
- 新增属性（如
obj.newKey = 'value'）无需Vue.set，立刻响应 - 直接通过索引改数组项（
arr[0] = 'new'）或修改length，都能触发更新 - 嵌套对象天然递进代理——首次访问深层属性时才创建子 Proxy，实现惰性响应
为什么 set 和 get 里总跟着 Reflect
Vue 3 在 Proxy 处理器中不直接操作 target[key]，而是调用 Reflect.get 和 Reflect.set。这不是多此一举，而是为两个关键目的：
-
保持 this 上下文正确：比如代理一个有方法的对象，
Reflect.get能确保方法内部的this仍指向原始对象 -
统一返回值规范：
Reflect.set返回布尔值表示是否成功，便于错误判断；Reflect.deleteProperty同样返回布尔值，比原生delete更可控
reactive 和 ref 的分工逻辑
Proxy 只能代理引用类型（对象、数组），不能代理基本类型。所以 Vue 3 提供了两套 API：
立即学习“前端免费学习笔记（深入）”；
-
reactive({ count: 0 })→ 返回 Proxy 对象，适合结构较深、频繁读写的对象 -
ref(0)→ 返回一个带.value的响应式包装对象，本质是用 reactive 包裹了 { value: xxx }，专为基本类型和模板中解构使用设计 - 模板中使用
{{ count }}时，Vue 编译器会自动展开 ref，无需写.value
响应式链条怎么跑起来的
一次数据更新触发视图重绘，背后是三步闭环：
- 渲染阶段：访问响应式数据 →
get拦截 → 触发track()，把当前副作用函数（如组件 render）记入该属性的依赖列表 - 修改阶段：赋值操作 →
set拦截 → 调用Reflect.set更新值 → 执行trigger()，通知该属性所有依赖重新执行 - 更新阶段：副作用函数重新运行 → 读取新数据 → 可能触发新一轮 track，形成细粒度更新
