Vue3响应式核心是Proxy代理对象，通过get/set拦截实现依赖收集与更新触发，解决Vue2中Object.defineProperty的监听局限；ref用于基本类型，通过.value包装为对象后代理。
Vue 响应式系统中 Proxy 的原理，核心就一句话：给数据对象加一层“智能门卫”，所有读写操作都必须经过它，它一边记下“谁在用这个数据”，一边在数据变化时立刻通知“该重新干活了”。这层门卫就是 ES6 的 Proxy，它替代了 Vue2 中的 Object.defineProperty，解决了旧方案监听不全、初始化慢、数组支持差等硬伤。
Proxy 是怎么当上“门卫”的？
Vue 调用 reactive() 时，不是去改原始对象的每个属性，而是直接用 new Proxy(target, handler) 把整个对象包起来，生成一个代理对象。这个代理对象对外表现和原对象一模一样，但所有访问（比如 obj.name、obj.arr[0]、obj.newKey = 'x'）都会先触发 handler 里的拦截函数：
-
get 拦截器：你一读属性（如渲染模板时取
state.count），门卫就记一笔：“当前正在执行的组件/计算函数，依赖了 count 这个字段”——这就是依赖收集； -
set 拦截器：你一改值（如
state.count++），门卫立刻查记录本，把所有依赖 count 的函数（比如组件 render、watch 回调）全部叫醒，让它们重新执行——这就是触发更新； - deleteProperty、has、ownKeys 等拦截器：连删属性、判断是否存在、遍历键名这些操作，也都被覆盖，确保响应式无死角。
为什么 Proxy 能监听新增属性和数组索引？
因为它是“面监控”，不是“点监控”：
-
Object.defineProperty像给每扇门单独装锁，只管已有的门（已有属性），新装的门（obj.xxx = 1）没锁，自然进出自如、无人察觉； -
Proxy是在整栋楼外建了一圈围墙+闸机，不管你是走正门、侧窗、天台还是钻狗洞（obj.newKey、arr[5] = 1、arr.length = 0），只要进出，闸机（Proxy）就一定能拦住、登记、放行。
依赖是怎么被“记下来”的？
Vue 内部维护了一个三层结构的“登记册”：
立即学习“前端免费学习笔记（深入）”；
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 第一层：
WeakMap存所有被代理的对象（比如{count: 0}）； - 第二层：每个对象对应一个
Map，按属性名（如'count'）分页； - 第三层：每个属性名下是一个
Set，里面存着所有用过它的函数（比如组件的render()、computed函数、watch回调）。
这个过程只发生在“读数据”的瞬间（比如首次渲染），所以不会重复登记，也不会漏掉深层嵌套（state.user.profile.name 会逐层代理、逐层收集）。
ref 和 reactive 的区别，也源于 Proxy 的限制
Proxy 只能代理对象、数组、Map、Set 等引用类型，不能代理字符串、数字、布尔值等基本类型。所以 Vue 提供了 ref() 来处理基本类型：
-
ref(1)返回一个带.value属性的响应式对象（本质是{ value: 1 }），再用Proxy去代理这个对象； - 你在模板里写
{{ count }}，Vue 会自动解包count.value，让你不用写.value； - 而在 JS 逻辑里，你必须显式写
count.value才能触发 get/set 拦截。
这并不是设计缺陷，而是对 JavaScript 类型系统的尊重与适配。
本质上，Vue3 的响应式不是魔法，而是一套精密协作的机制：Proxy 负责“看见变化”，依赖收集负责“记住谁关心”，触发更新负责“喊人重来”。三者环环相扣，才让数据驱动视图这件事，既可靠又自然。
