Vue 的响应式原理是如何实现的？

1. 依赖收集与派发更新

Vue 3 的响应式系统基于 ES6 的 Proxy 实现，通过拦截对象操作来追踪数据依赖。当组件渲染函数执行并读取响应式属性时，会触发 Proxy 的 get 拦截器，Vue 借此把当前的渲染副作用（effect）记录为该属性的依赖，这一过程称为依赖收集（track）。当响应式属性被修改时，set 拦截器被触发，Vue 遍历该属性记录的所有依赖并通知它们重新执行，这一过程称为派发更新（trigger）。整个机制可概括为"谁读了我，我就记住谁；我变化时，就通知所有依赖我的人"。

2. 异步批量调度

Vue 3 默认采用异步调度策略。同一个事件循环内发生的多次响应式数据变更，会被收集到微任务队列中，在下一次 tick 统一触发组件更新。这种批量更新机制避免了频繁的重渲染，也规避了中间状态被渲染出来的问题，是 Vue 性能表现良好的重要原因。

3. 基于 Proxy 相比 Object.defineProperty 的优势

Vue 2 使用 Object.defineProperty 实现响应式，只能拦截对象属性的 get 和 set，无法检测属性的新增与删除，也无法直接监听数组索引变化，需要重写数组方法加以弥补。Vue 3 改用 Proxy 后可拦截 get、set、delete、has 等 13 种操作，能够检测动态新增属性、数组索引和 length 变化，并原生支持 Map、Set、WeakMap 等集合类型。此外，Proxy 采用惰性代理、按需处理，相比 Vue 2 初始化时递归遍历所有属性，内存开销更低。