proxy 是实现数据双向绑定的核心机制，通过拦截 get/set 操作实现依赖收集与视图更新；需配合依赖管理器，处理嵌套对象和数组，并注意避免 dom 更新触发的事件循环。
ES6 的 Proxy 可以拦截对象的读写操作，是实现数据双向绑定的核心机制之一。它不修改原始对象，而是创建一个代理层，在访问或修改属性时插入自定义逻辑，比如触发视图更新。
用 Proxy 拦截 get/set 实现响应式基础
要让数据变化自动更新视图，关键是在赋值（set）时通知更新，在取值（get）时收集依赖（如当前正在渲染的模板函数）。最简模型如下：
- get 拦截：记录当前“谁在读这个属性”（依赖收集），比如把当前渲染函数存入该属性对应的依赖队列
- set 拦截：触发该属性所有已注册的依赖函数重新执行（即刷新视图）
- 需配合一个全局依赖管理器（如
Dep类），每个属性维护自己的依赖列表
简易双向绑定：结合 input 元素的 value 和事件
双向绑定 = 数据变 → 视图变（靠 set），视图变 → 数据变（靠监听 input 或 change 事件）。示例流程：
- 用
Proxy代理数据对象，拦截set并更新对应 DOM 元素的value - 给
<input v-model="msg">这类元素绑定input事件，事件回调中直接赋值给代理对象（触发set拦截） - 为避免无限循环（输入 → set → 更新 input.value → 触发 input 事件），更新 DOM 前可加判断：仅当新值 ≠ 当前 input.value 时才设值
注意 Proxy 的局限与替代方案
Proxy 无法监听对象新增/删除属性（除非用 Reflect.set 配合递归代理），也不能直接代理普通对象的原型链变更。常见补充手段包括：
- 对嵌套对象也递归创建 Proxy（在
get返回对象时自动代理） - 数组方法需单独拦截（如
push、pop），因为它们不触发set，可用handler中重写数组方法或劫持原型 - Vue 2 用
Object.defineProperty兼容老浏览器；Vue 3 起全面切换到Proxy，正是因其能监听动态属性
一个小而完整的示例（含 HTML 绑定）
以下代码实现一个带 v-model 效果的简易绑定：
const data = { msg: 'hello' };
const handlers = {
get(target, key) { return target[key]; },
set(target, key, value) {
target[key] = value;
const el = document.querySelector(`[v-model="${key}"]`);
if (el && el.value !== value) el.value = value;
return true;
}
};
const vm = new Proxy(data, handlers);
// 初始化：将初始值填入 input
document.querySelectorAll('[v-model]').forEach(el => {
const key = el.getAttribute('v-model');
el.value = data[key];
el.addEventListener('input', () => vm[key] = el.value);
});
这样，修改 vm.msg 或输入框内容，都会同步对方。实际项目中会封装成响应式系统，但核心就是这层 get/set 拦截。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
