Vue 源码分析step_3-watch 和 computed

最新推荐文章于 2024-06-28 12:11:45 发布

李思岐

最新推荐文章于 2024-06-28 12:11:45 发布

阅读量311

点赞数

分类专栏： vue 源码学习文章标签： vue

本文链接：https://blog.csdn.net/qq_41206257/article/details/108805202

版权

vue 源码学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文分析了Vue中watch和computed的实现原理。watch通过将响应式对象与watcher结合，实现依赖收集。computed同样利用watcher，但主要为获取返回值，当依赖变化时自动更新。虽然两者功能类似，但使用场景有别：watch用于监听并响应变化，computed适合需要计算结果的场合。设计思想上，它们提供了不同的操作方式，避免过度集中，保持代码清晰和模块化。

摘要由CSDN通过智能技术生成

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。试想一下，如果所有的操作都集中在一个方法上，那么这个方法是不是太臃肿了。当我们仅仅需要轻巧的计算时，那么大的函数是不是太浪费了。