Vue中的数据watcher

[SunoAries]

核心是Object.defineProperty,在get里判断是否订阅，在set发出通知，

function defineReactive (obj, key, val) {
  var dep = new Dep()
  var childOb = observe(val)

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>{
      // 说明这是watch 引起的
      if(Dep.target){
        dep.addSub(Dep.target)
      }
      return val
    },
    set:newVal=> {
      var value =  val
      if (newVal === value) {
        return
      }
      val = newVal
      childOb = observe(newVal)
      dep.notify()
    }
  })
}

有一个订阅列表。

class Dep {
  constructor() {
    this.id = uid++
    this.subs = []
  }
  addSub(sub){
    this.subs.push(sub)
  }
  notify(){
    this.subs.forEach(sub=>sub.update())
  }
}

//Dep.target  的是watcher
Dep.target = null

[SunoAries]

遇见一个非常傻逼的组件，是一个包装了的input，结果v-model和里面的value不是一个值，所以改变了props，实际表现的框里面用的local-value不变。导致我对这个印象不太好。双向绑定。