自己的观点：就是给在内部给 input 和 textare 添加了 onchange 事件 来动态获取值，赋值给 data 再改变视图。

一、关键词

1、Object.defineProperty()

双向绑定的核心就是通过 Object.defineProperty() ，对 data 的每个属性进行 getter、setter 的拦截

export default {
  //对这个 data 的每个属性进行 getter、setter 拦截
  data() {
    return {
      width: 100,
      routers: null,
    };
  }
}

MDN：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，返回此对象。

2、观察者模式

观察者则是直接从它所观察的实体那里得到通知；目标对象(Subject)就是 data ；观察者(Object)就是 使用 data 里的某个属性的地方。

1. 是让双向绑定 更有效率，它是一对多的模式。
2. “一”：就是 修改 data 里的某一个值；
3. “多”：就是 凡是用了这个值的地方都会更新；
4. 这就是用了这个值的“地方”都在观察着这个 data；这就是一对多模式，所以会提高效率。

二、双向绑定的几种实现方式

1、发布者——订阅者模式（backone.js）

订阅者则是通过渠道获得通知。 有三个角色，发布者(Publisher)，事件调度中心(Event Channel)，订阅者(Subscriber) 事件调度中心：维护任务类型，以及每种任务下的订阅情况；给订阅者提供订阅功能；发布者发布任务后会把任务发给对应的订阅者。

2、脏值检查（angular.js）

通过脏值检测的方式对比数据是否变更，再决定视图是否更新，通过 setInterval 方式来定时检测(比较耗资源)

3、数据劫持（vue.js）

使用 数据劫持 结合 发布者—订阅者模式的方式，核心是通过 Object.defineProperty() 来劫持各属性的 setter 和 getter

三、要实现 mvvm 的双向绑定，必须要有几点：

1. 数据监听器Observer，对数据对象（data）的属性进行监听，通知订阅者
2. Compile 是对Dom 节点的操作
3. Watcher 作为连接 Observer 和 Compile 的桥梁