vue响应式原理

//响应式原理
  let obj = {
    name: 'yangedong',
    age: 12
  }
  Object.keys(obj).forEach((key) => {
    let value = obj[key];
    Object.defineProperty(obj, key, {
      set(newVal) {
        console.log('监听' + key + "的改变")
        value = newVal
      },
      get() {
        console.log(value + "的获取")
        return value
      }
    })
  })
  //发布者
  class Dep {                                                                 
    constructor(name) {
      this.subs = []
    }
    addSubs(watcher) {
      this.subs.push(watcher)
    }
    notify(){
      this.subs.forEach(item=>{
        item.update()
      })
    }
  }
  //订阅者
  class Watcher {
    constructor(name) {
      this.name = name
    }
    update() {
      console.log(this.name + '触发更新')
    }
  }
  let dep = new Dep();
  let w1 = new Watcher('张桑1');
  dep.addSubs(w1);
  let w2 = new Watcher('张桑2');
  dep.addSubs(w2);
  let w3 = new Watcher('张桑3');
  dep.addSubs(w3);
  dep.notify();