Vue 源码分析step_3-watch 和 computed

watch 的实现

  Vue.prototype.$watch = function (
    expOrFn,
    cb,
    options
  ) {
    const watcher = new Watcher(vm, expOrFn, cb, options)

    return function unwatchFn() {
      watcher.teardown()
    }
  }

watch 的实现其实是把第一个参数设置成了响应式对象,watcher 构造函数,并进行自我执行进入依赖的收集:

...
get () {
    ...
      value = this.getter.call(vm, vm)
       
    }
    return value
  }
...

至于 Computed 的实现

watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)
export function defineComputed(
  target,
  key,
  userDef
) {
  let sharedPropertyDefinition = {}
  sharedPropertyDefinition.get = userDef.get
  sharedPropertyDefinition.set = userDef.set
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

也是先经过了 watcher 再设置成了响应式对象。


可以看出实现方式都是一样的。不同的是使用方式。

  • watch 监听响应式对象,并进行回调方法的执行
  • computed使用场景在需要拿到返回值的情况。如果依赖有变化,那么返回值也会有变化。
  • 自认为“computed可以缓存计算过后的值”这种说法是不准确的。因为 watch 是观测变化并且做出行为,目的并不是拿到返回值。而 computed 多用于拿到返回值。其实 watch 还是 computed 几乎可以实现同样的功能,只不过是使用场景不同,我们按照功能使用的便捷程度,将其一种东西,变成了两种使用方式而已。就像 vuex 中 dispatch 的可以进行同步也可以进行异步,但是大家都习惯用 commit 进行同步,dispatch 进行异步。
  • 这种使用方式只是体现了一种设计思想 --用一种方式进行一种操作。我要拿返回值就用 computed,我要根据状态的变化去进行操作就用 watch。试想一下,如果所有的操作都集中在一个方法上,那么这个方法是不是太臃肿了。当我们仅仅需要轻巧的计算时,那么大的函数是不是太浪费了。

 

 

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页