Vue侦测相关api的实现方法

Vue.prototype.$watch = function (expOrFn, cb, options) {  const vm = this  options = options || {}  const watcher = new Watcher(vm, expOrFn, cb, options)   if(options.immediate) {    cb.call(vm, watcher,.value)  }  return function unwatchFn() {    watcher.teardown()  }}

class Watcher {  constructor (vm, expOrFn, cb) {    this.vm = vm    this.deps = []    this.depIds = new Set()    if(typeof expOrFn === 'function') {      this.getter = expOrFn    }else {      this.getter = parsePath(expOrFn)    }    this.cb = cb    this.value = this.get()  }  ....  addDep (dep) {    const id = dep.id       //参数dep是Dep实例对象    if(!this.depIds.has(id)) {  //判断是否存在避免重复添加      this.depIds.add(id)          this.deps.push(dep)      dep.addSub(this)     //this 是依赖    }  }  teardown () {    let i = this.deps.length    while (i--) {      this.deps[i].removeSub(this)    }  }}let uid = 0class Dep {  constructor () {    this.id = uid++    ...  }  ...  depend () {    if(window.target) {      window.target.addDep(this)  //将this即当前dep对象加入到watcher对象上    }  }  removeSub (sub) {    const index = this.subs.indexOf(sub)    if(index > -1) {      return this.subs.splice(index, 1)    }  }}

class Watcher {  constructor (vm, expOrFn, cb, options) {    this.vm = vm    this.deps = []    this.depIds = new Set()    if(typeof expOrFn === 'function') {      this.getter = expOrFn    }else {      this.getter = parsePath(expOrFn)    }    if(options) {          //取值      this.deep = !!options.deep    }else {      this.deep = false    }    this.cb = cb    this.value = this.get()  }  get () {    window.target = this    let value = this.getter.call(vm, vm)    if(this.deep) {      traverse(value)    }    window.target = undefined    return value  }  ...}const seenObjects = new Set()function traverse (val) {  _traverse(val, seenObjects)  seenObjects.clear()}function _traverse(val, seen) {  let i, keys  const isA = Array.isArray(val)  if((!isA && isObject(val)) || Object.isFrozen(val)) { //判断val是否是对象或者数组以及是否被冻结    return  }  if(val._ob_) {    const depId = val._ob_.dep.id   //可以看前面一篇我们对Observer类添加了this.dep = new Dep()，所以能访问其dep.id    if(seen.has(depId)) {      return    }    seen.add(depId)  }  if(isA) {    i = val.length    while (i--) _traverse(val[i], seen)  } else {    keys = Object.keys(val)    i = keys.length    while (i--) _traverse(val[i], seen)  }}

Vue.prototype.$set = function (target, key, val) {  if(Array.isArray(target) && isValidArrayIndex(key)) {  //是数组并且key有效    target.length = Math.max(target.length, key)  //处理key > target.length    target.splice(key, 1, val)  //添加新元素，并输出依赖更新同时新元素也会进行`Obsever`处理    return val  }  if(key in targert && !(key in Object.prototype) { //能遍历并且是自身key    target[key] = val  //触发set，执行依赖更新    return val  }  const ob = target._ob_  if(target.isVue || (ob && ob.vm.Count) { //不是vue实例也不是vue实例的根对象(即不是this.$data跟对象)    //触发警告    return  }  if(!ob) {  //只添加    target[key] = val    return val  }  defineReactive(ob.value, key, val) //进行响应式处理  ob.dep.notify() //触发依赖更新  returnv val}

Vue.prototype.$delete = function (target, key) {  if(Array.isArray(target) && isValidArrayIndex(key)) {    target.splice(key, 1)    return  }  const ob = target._ob_  if(target.isVue || (ob && ob.vm.Count) { //不是vue实例也不是vue实例的根对象(即不是this.$data跟对象)    //触发警告    return  }  if(!hasOwn(target, key)) {    return  }  delete target[key]  if(!ob) {    return  }  ob.dep.notify()}