通过Proxy实现双向绑定，拦截get/set操作，结合DOM事件监听，使数据与视图同步更新。支持嵌套对象，相比defineProperty更强大灵活。
利用 JavaScript 的 Proxy 对象可以非常灵活地实现数据的双向绑定，尤其是在没有使用框架的情况下，比如 Vue 3 就是基于 Proxy 实现响应式的。通过拦截对象的读取和赋值操作，我们可以在数据变化时自动触发视图更新，也可以在视图变化时反向更新数据。
监听数据变化：使用 Proxy 拦截 set 和 get
Proxy 可以代理一个对象，拦截其属性的访问和修改。这是实现双向绑定的基础。
定义一个响应式对象：
function createReactiveObject(target, callback) {
return new Proxy(target, {
get(obj, prop) {
return obj[prop];
},
set(obj, prop, value) {
obj[prop] = value;
callback(prop, value); // 数据变化时通知
return true;
}
});
}
当数据被修改时，callback 会被调用，可以用来更新 DOM 或执行其他逻辑。
绑定视图：数据变化更新 UI
在表单元素或文本节点中绑定数据字段，当数据变化时自动更新界面。
示例：将数据绑定到 input 元素
const data = { message: 'Hello' };
const reactiveData = createReactiveObject(data, (prop, value) => {
const el = document.getElementById(prop);
if (el) el.value = value; // 同步更新输入框
});
// 初始渲染
document.getElementById('message').value = data.message;
这样，当你在代码中修改 reactiveData.message = 'Hi' 时，input 框内容会自动更新。
反向绑定：UI 变化更新数据
除了数据驱动视图，还需要用户操作视图时更新数据。这需要监听 DOM 事件。
为 input 添加 input 事件监听：
document.getElementById('message').addEventListener('input', (e) => {
reactiveData.message = e.target.value; // 视图变化同步回数据
});
这样一来，无论是 JS 修改数据，还是用户输入，双方都能保持同步，形成真正的双向绑定。
支持嵌套对象与数组（进阶）
Proxy 的优势在于它可以递归代理深层属性，不像 Object.defineProperty 只能劫持已有属性。
增强 createReactiveObject 支持嵌套：
function createReactiveObject(target, callback) {
const handler = {
get(obj, prop) {
const value = obj[prop];
if (value && typeof value === 'object') {
// 深层代理
return createReactiveObject(value, callback);
}
return value;
},
set(obj, prop, value) {
obj[prop] = value;
callback(prop, value);
return true;
}
};
return new Proxy(target, handler);
}
这样即使修改 reactiveData.user.name，也能触发回调。
基本上就这些。Proxy 让双向绑定变得更强大、更简洁，尤其适合构建轻量级 MVVM 工具或理解响应式原理。关键点是拦截数据流，并连接数据与视图的更新通道。不复杂但容易忽略细节，比如深度代理和数组处理。
