Vue侦测相关api的实现方法

vm.$watch

用法： vm.$watch( expOrFn, callback, [options] ) ，返回值为 unwatch 是一个函数用来取消观察；下面主要理解 options 中的两个参数 deep 和 immediate 以及 unwatch

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()  }}

immediate

从上面代码中可以看出当 immediate 为 true 时，就会直接进行执行回调函数

unwatch

实现方式是：

将被访问到的数据 dep 收集到 watchs 实例对象上，通过 this.deps 存起来 将被访问到的数据 dep.id 收集到 watchs 实例对象上，通过 this.depIds 存起来 最后通过 watchs 实例对象的 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)    }  }}

分析

当执行 teardown() 时需要循环；因为例如 expOrFn = function () { return this.name + this.age } ，这时会有两个 dep 分别是 name 与 age 分别都加入了 watcher 依赖( this )，都会加入到 this.deps 中，所以需要循环将含有依赖的 dep 都删除其依赖

deep

需要明白的是

deep 干啥用的，例如 data = {arr: [1, 2, {b: 6]} ，当我们只是监听 data.arr 时，在 [1, 2, {b: 66}] 这个数值内部发生变化时，也需要触发，即 b = 888

怎么做呢？

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)  }}