使用 Proxy 拦截对象的 get 和 set 操作，实现数据变化监听；2. 在 set 中调用 updateView 更新 DOM，实现视图同步；3. 通过 input 事件监听用户输入，修改代理对象触发 set，形成双向绑定；4. 初始化时渲染视图，确保数据与界面一致。核心是利用 Proxy 拦截赋值操作并通知更新，结合事件监听完成数据与视图的双向同步。
JavaScript 的代理（Proxy）可以拦截对象的操作，利用这一特性可以轻松实现数据的双向绑定。核心思路是：当数据发生变化时自动更新视图，同时在视图操作（如输入框输入）时也能同步更新数据。
1. 使用 Proxy 监听数据变化
通过 Proxy 可以监听对象属性的 get 和 set 操作。当属性被读取或修改时，执行对应的逻辑，比如触发视图更新。
示例代码：
const data = {
message: 'Hello'
};
const handler = {
get(target, key) {
console.log(`获取 ${key}: ${target[key]}`);
return target[key];
},
set(target, key, value) {
console.log(`设置 ${key} 为 ${value}`);
target[key] = value;
// 触发视图更新
updateView();
return true;
}
};
const proxy = new Proxy(data, handler);
2. 绑定视图并实现自动更新
将代理对象的数据渲染到 DOM，并在 set 被触发时调用更新函数，使界面同步刷新。
HTML 示例：
<div id="app"> <input type="text" id="input" /> <p id="text"></p> </div>
JavaScript 更新视图函数：
function updateView() {
document.getElementById('input').value = proxy.message;
document.getElementById('text').textContent = proxy.message;
}
3. 监听用户输入，反向更新数据
为输入框添加事件监听，在用户输入时修改代理对象的值，从而触发 set，形成双向流动。
立即学习“Java免费学习笔记（深入）”；
<code>document.getElementById('input').addEventListener('input', (e) => {
proxy.message = e.target.value; // 触发 set，自动更新其他视图
});
页面加载时初始化视图：
// 初始化 updateView();
4. 完整示例整合
把所有部分组合起来，即可实现一个极简的双向绑定系统。
const data = { message: 'Hello' };
const handler = {
set(target, key, value) {
target[key] = value;
updateView();
return true;
}
};
const proxy = new Proxy(data, handler);
function updateView() {
const value = proxy.message;
document.getElementById('input').value = value;
document.getElementById('text').textContent = value;
}
document.getElementById('input').addEventListener('input', (e) => {
proxy.message = e.target.value;
});
// 初始渲染
updateView();
基本上就这些。使用 Proxy 实现双向绑定简洁直观，关键是拦截 set 操作并通知视图更新，再通过事件监听把视图变化写回数据。不复杂但容易忽略细节，比如确保每次赋值都走代理。
