Vue 监视属性是否像计算属性一样缓存？答案

【问题标题】：Do Vue watched properties cache just like the computed properties?Vue 监视属性是否像计算属性一样缓存？
【发布时间】：2017-01-14 01:49:07
【问题描述】：

在 Vue 文档 it is mentioned 中，计算属性被智能缓存，而不是使用常规方法：

相比之下，只要发生重新渲染，方法调用将始终运行该函数。为什么我们需要缓存？想象一下，我们有一个昂贵的计算属性......

我的问题是：watched properties 是否也有类似计算属性的缓存？（包括 Vuex 观看，例如使用 vm.$store.watch...）

【问题讨论】：

标签： javascript vuejs2 vue.js vuex

【解决方案1】：

虽然saurabh的回答没有错，但我觉得它并没有真正回答问题。

答案是：不，观察者没有被“缓存”——这没有意义，因为观察者是有副作用的函数，但没有返回值并且不能用作属性。

因此，没有必要也不明智地为观察者缓存任何内容。

但是是的，两者都只在观察数据发生变化时执行。

【讨论】：

【解决方案2】：

watchers 的行为与computed 的行为相同，因为computed 在内部使用watchers 实现。当定义一个computed 属性时，vue 内部会在计算属性中使用的变量上设置观察者，请参见下面来自source 的代码：

function makeComputedGetter (getter: Function, owner: Component): Function {
  const watcher = new Watcher(owner, getter, noop, {
    lazy: true
  })
  return function computedGetter () {
    if (watcher.dirty) {
      watcher.evaluate()
    }
    if (Dep.target) {
      watcher.depend()
    }
    return watcher.value
  }
}

因此，当响应式数据发生变化时，用 computed 或 watch 块编写的代码只会执行一次。

【讨论】：