MVVM 在 View 与 Model 之间加了 ViewModel：它持有状态并暴露给模板，框架负责把两者的同步自动化。你只需声明 数据长什么样，布局如何呈现由模板决定——改一个变量，页面对应位置自动变化，不再手写 innerHTML 和事件拼装。
双向绑定 = 数据到视图的渲染 + 视图到数据的回写，表单是最直观的场景：输入框敲一个字，状态同步更新；状态被代码改了，输入框内容也跟着变。Vue 的 v-model、Angular 的 [(ngModel)] 都是这一思想的语法糖，底层靠响应式追踪与事件监听实现。
// 双向绑定的最小模型：数据变化驱动视图，输入回写数据 function bind(input, model, key) { // 数据 -> 视图 Object.defineProperty(model, key, { get: function () { return model['_' + key]; }, set: function (v) { model['_' + key] = v; input.value = v; // 数据变，视图跟着变 } }); // 视图 -> 数据 input.addEventListener('input', function (e) { model[key] = e.target.value; // 输入时，数据跟着变 }); } var state = {}; var el = document.querySelector('#name'); bind(el, state, 'name'); state.name = '张三'; // 输入框自动变成 张三 el.value = '李四'; // 手动改输入框也不会生效，需触发 input 事件回写