MVVM中的双向绑定是怎么回事
在现代前端开发中，MVVM（Model-View-ViewModel）模式被广泛使用，尤其是在Vue、Angular这类框架里。它的核心优势之一就是双向绑定——数据变了，界面自动更新；界面操作了输入框，数据也跟着变。听起来像魔法，其实背后有清晰的机制。
从一个简单的例子说起
想象你在填写一个注册表单，姓名输入框绑定了一个叫 name 的变量。你每敲一个字，JavaScript里的 name 值就实时更新；反过来，如果代码里把 name = '张三'，输入框内容也会变成“张三”。这种互相响应，就是双向绑定的体现。
数据劫持：让JS知道你在改东西
JavaScript原本不会主动告诉你某个变量被修改了。MVVM框架比如Vue 2.x用的是 Object.defineProperty 来“监听”对象属性的变化。它把普通属性变成 getter 和 setter，每次读取或赋值时都能插入自定义逻辑。
let data = {};
let _name = '';
Object.defineProperty(data, 'name', {
get() {
console.log('有人读取了name');
return _name;
},
set(val) {
console.log('name被修改为：' + val);
_name = val;
// 触发视图更新
updateView();
}
});
function updateView() {
document.getElementById('input').value = data.name;
}这样，只要 data.name = '李四'，setter就会触发，进而通知页面去刷新对应的部分。
视图监听：输入框也能反向驱动数据
光监听数据还不够，用户在输入框打字，也要能改数据。这就靠DOM事件，比如 input 事件。当用户输入时，框架会自动把新值同步回Model。
<input type="text" id="input" oninput="data.name = this.value" />结合上面的 setter，这就形成了闭环：输入框改数据 → 数据变化 → 其他依赖该数据的视图也更新。
Vue 3的升级：Proxy登场
Vue 2的 defineProperty 有个短板：没法监听新增或删除的属性。Vue 3换成了 Proxy，直接代理整个对象，不管怎么改属性都能捕获。
let data = { name: '' };
let proxy = new Proxy(data, {
set(target, key, value) {
console.log(`${key} 被设置为 ${value}`);
target[key] = value;
updateView();
return true;
}
});现在无论是改 name 还是添加 proxy.age = 25，都能被准确捕捉。
模板编译：找到谁依赖了谁
框架怎么知道哪段HTML依赖哪个变量？答案是编译阶段解析模板。比如遇到 {{ name }}，就会建立一个依赖关系：这个文本节点依赖 name。一旦 name 变了，只更新这一小块。
这种“谁用谁更新”的机制叫做依赖收集，通常通过发布-订阅模式实现。每个响应式属性维护一个“订阅者列表”，数据一变，遍历通知。
实际开发中的表现
写Vue代码时，你只需要写：
<template>
<div>
<input v-model="name" />
<p>你好，{{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return { name: '' };
}
};
</script>v-model 其实是语法糖，背后就是 value 绑定加 input 事件的组合。框架替你处理了所有监听和同步细节。
双向绑定让开发者不再手动操作DOM更新数据，专注业务逻辑。虽然它不是万能的（比如性能敏感场景可能需要更精细控制），但在大多数表单、交互场景下，极大提升了开发效率。