Vue 双向绑定原理

Object.defineProperty 给每个属性添加get、set方法，监听数据的变化

Class Observer {
  constructor(data) {
    this.observer(data);
  }
  
  observer(data) {
    if (data && typeof data === 'object') {
      for (let key in data) {
        this.defineReactive(data, key, obj[key]);
      }
    }
  }
  
  defineReactive(obj, key, value) {
    this.observer(value); // 如果属性值是对象，给这个对象添加get、set
    
    Object.defineProperty(obj, key, {
      get: () => {
        return value;
      },
      set: (newValue) => {
        if (newValue !== value) { 
          this.observer(newValue); // 设置的值是对象，给这个对象添加get、set
          value = newValue;
          console.log('监听到数据变化，需要更新UI');
        }
      }
    })
  }
}

let obj = { name: 'Tom' };
new Observer(obj);