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-admin-change-reviewer

审查 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 负责“看见变化”，依赖收集负责“记住谁关心”，触发更新负责“喊人重来”。三者环环相扣，才让数据驱动视图这件事，既可靠又自然。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！