双向绑定的原理

MVVM 的核心功能就是双向绑定

数据层（Model）：应用的数据及业务逻辑

视图层（View）：应用的展示效果，各类UI组件

业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

采用数据劫持结合发布订阅的模式，通过 Object.defineProperty() 对数据绑定 getter setter 方法,

当数据发生变化发布给订阅者 触发相应监听回调 更新视图。

流程

• new Vue 时候 调用 new Observer(data)

• new Observer(data) 里面 对每个属性使用 defineProperty

• defineProperty 的 get() 里面进行订阅收集 watcher

• defineProperty 的 set() 里面进行发布依次执行 收集的 watcher（推入到nextTick执行）

<input id="input"/>
<div id="div"></div>
// js实现简单的双向绑定
const obj = {};
const input = document.getElementById('input');
const div = document.getElementById('div');
Object.defineProperty(obj, 'name', {
  get () {
    return obj.name;
  },
  set (newValue) {
    input.value = newValue;
    div.innerHTML = newValue;
  }
})
input.addEventListener('keyup', (event) => {
  obj.name = event.target.value;
})