在《前端架构师之吾见》第三篇中介绍了 MVVM 模式，提及到 View 和 ViewModel 之间存在着交互。但好奇的读者可能会发现与 MVC、MVP 不同的是上篇并未提及 View 和 ViewModel 之间的交互是什么，是“发送状态改变”、“发送用户动作”、“更新”，还是其他？本篇正是解答这一问题的。
在 MVVM 模式，View 和 ViewModel 之间的双向互动是通过一种叫做数据绑定（Data Binding）的技术实现的。下面将着重介绍数据绑定技术原理及实现。
MVVM 中的数据绑定
数据绑定
数据绑定是指视图（View）的变化能实时让视图数据模型（ViewModel）发生变化，反之数据的变化也能实时更新到视图（View）。其核心的原理是采用数据劫持结合观察者（发布-订阅）模式，通过代理模式（Object.defineProperty 或 Proxy）对属性的 get 和 set 进行拦截或重置。在数据发生变化的时候发消息给订阅者，触发相应的监听回调函数。
MVVM 中双向数据绑定流程
下面将一一讲解双向数据绑定中涉及到核心技术点。其中观察者模式及代理模式属于经典的设计模式。
观察者模式
观察者模式又称为发布-订阅（Publish/Subscribe）模式、模型-视图（Model/View）模式或源-监听器（Source/Listener）模式，是定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相应依赖对象都能得到通知及更新。
观察者设计模式
代理模式
代理模式是给某一个对象提供一个代理，并由代理对象控制原对象的引用，是一种对象结构性设计模式。
代理设计模式
数据劫持
是一种通过 hack 的方式，在访问或修改对象属性时，拦截默认行为，进行额外的操作并返回新的结果。在 Javascript 中常见的数据劫持可通过 Object.defineProperty() 或 Proxy 来实现。鉴于 Object.defineProperty() 的性能开销及对数组 push、unshift、splice 等操作无法监听等问题及 ES6+ 得到大量应用，更推荐采用 Proxy 来实现数据劫持。
代码实现
简易实现
// index.html
<head>
<script type='application/javascript' src='./data-binding.js' />
</head>
...
<input data-bind='name' type='text' />
{{name}}
...
// data-binding.js
class MVVM {
constructor() {
this.element = document.getAttribute('data-bind');
this.observe();
this.render();
}
observe(){
this.data = new Proxy(this.data, {
get: (target, key) => target[key],
set: (target, key, newValue) => {
target[key] = newValue;
this.render();
}
});
}
render() {
this.element.innerHTML = `${this.data}`;
}
}
Vuejs 中的双向绑定
Vuejs 中的双向数据绑定是通过 v-model 指令来实现的，具体代码实现可参见 vuejs 项目源码。
https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parse.ts