什么是双向绑定
在现代前端开发中，用户填写表单时希望看到实时反馈，比如输入用户名的同时，页面上就显示出来。这种数据变化自动反映到界面、界面操作又反过来更新数据的机制，就是所谓的“双向绑定”。
它常见于 Vue、Angular 等 JavaScript 框架中，让开发者不用手动操作 DOM 就能实现视图和数据的同步。
基于数据劫持的实现方式
以 Vue 2 为例，核心是利用了 Object.defineProperty 对对象属性进行拦截。当读取属性时收集依赖，修改属性时通知更新。
举个例子：你写了一个用户信息编辑页，输入框绑定了 username 字段。只要你在输入框打字，背后的 username 值就会变，同时所有用到这个值的地方都会跟着刷新。
let data = { username: '' };
let value = data.username;
Object.defineProperty(data, 'username', {
get() {
console.log('被读取了');
return value;
},
set(newValue) {
console.log('被修改了');
value = newValue;
updateView(); // 触发视图更新
}
});上面这段代码通过 set 拦截赋值操作，一旦数据改变，就可以执行视图更新函数。
结合模板解析实现绑定
光有数据监听还不够，还得知道哪个节点依赖哪个字段。框架在初始化时会解析模板，遇到 v-model 或类似指令时，就建立一个“订阅关系”。
比如下面这个简单的模板：
<input type="text" id="nameInput">
<p id="displayName"></p>对应的绑定逻辑可能是：
document.getElementById('nameInput').addEventListener('input', function(e) {
data.username = e.target.value;
});
function updateView() {
document.getElementById('displayName').innerText = data.username;
}这样输入框一变，data.username 更新，然后 updateView 被调用，页面上的文本也跟着变。
Vue 3 中的改进方案
Vue 3 改用 Proxy 实现双向绑定，解决了之前无法检测新增或删除属性的问题。
Proxy 可以代理整个对象，不需要逐个定义属性的 getter/setter，更加灵活高效。
const data = { username: '' };
const handler = {
set(target, key, value) {
console.log(`${key} 被修改`);
target[key] = value;
updateView();
return true;
}
};
const proxy = new Proxy(data, handler);
// 使用 proxy 替代原始 data
proxy.username = '小明'; // 自动触发更新这种方式不仅代码更简洁，还能监听数组变化、动态属性添加等场景。
实际应用中的注意事项
虽然框架帮你做了大部分工作，但理解底层机制有助于排查问题。比如在 Vue 中直接通过索引修改数组元素，老版本可能不会触发更新，需要用 splice 或设置长度来绕过限制。
另外，双向绑定不是万能的。对于复杂状态管理，建议配合 Vuex 或 Pinia 这类工具，避免组件间数据混乱。
在做表单校验、联动选择这类功能时，双向绑定能大幅减少模板代码，提升开发效率。