你在用 Excel 的时候，可能用过公式。比如 A1 单元格填数字，B1 写个公式 =A1*2，只要 A1 一变，B1 马上跟着变。这种“自动响应变化”的机制，在前端开发里也存在，叫数据绑定。
数据绑定是啥？
简单说，就是让网页上的显示内容和背后的变量保持同步。你改了数据，页面自动刷新；你操作页面（比如输入文字），数据也跟着更新。不用手动去写一堆代码改 DOM。
比如你做个购物车，商品数量变了，总价自动重算并显示。传统做法得手动找元素、改 innerHTML。而用了数据绑定，你只需要改 JavaScript 里的 count 变量，页面就自己动了。
怎么实现的？监听 + 更新
主流前端框架像 Vue、React，底层思路其实都差不多。以 Vue 为例，它在初始化时会遍历 data 里的对象，用 Object.defineProperty 把每个属性变成 getter 和 setter。
var obj = {};
var _count = 0;
Object.defineProperty(obj, 'count', {
get: function() {
console.log('有人读了 count');
return _count;
},
set: function(val) {
console.log('count 被改成了 ' + val);
_count = val;
// 这里可以触发页面更新
}
});
当你在模板里写 {{ count }}，Vue 会先读一次 obj.count，触发 getter，这时候框架就知道：“哦，这个值被模板用了”。等你 later 改了 obj.count，setter 被触发，框架就知道：“得重新渲染用到它的部分”。
虚拟 DOM 是怎么配合的？
直接操作真实 DOM 很慢。React 和 Vue 都用了虚拟 DOM —— 就是用 JS 对象模拟一棵 DOM 树。每次数据变，先在虚拟树上算出最小修改，再批量更新到真实页面，减少性能浪费。
// 一个简单的虚拟节点
{
type: 'div',
props: { className: 'item' },
children: [
{ type: 'span', children: ['当前数量：1'] }
]
}
数据更新后，生成新虚拟树，和旧的对比（diff 算法），找出哪些节点变了，只改那些地方。比如 span 里的文本从“当前数量：1”变成“当前数量：2”，其他不动。
双向绑定怎么做？
表单元素特别常用双向绑定。比如输入框，你打字，数据变；数据变，输入框内容也变。Vue 用 v-model 实现，本质是 value 绑定加 input 事件监听。
<input :value="name" @input="name = $event.target.value" />
这行代码的意思是：输入框显示 name 的值，每当用户输入，就把输入的内容赋给 name。看起来像“自动同步”，其实是语法糖包装出来的效果。
React 则更“直白”，没有双向绑定语法，必须手动写 onChange 事件来更新 state，控制 value。虽然代码多点，但逻辑更清晰可控。
为什么办公软件也开始用这些技术？
现在的在线文档、表格工具，比如钉钉文档、飞书表格，界面复杂度早不是静态页面能搞定的。它们内部其实就是用 React 或 Vue 搭的，靠数据绑定维持状态同步。你改一个单元格，图表实时刷新，协作光标来回跳，背后都是这套机制在跑。
哪怕你不用写代码，理解一点数据绑定的原理，也能更好明白这些软件为啥反应快、协同顺。下次你看到“自动计算”“实时更新”功能，就知道不是魔法，是数据和视图绑在一起的结果。