是什么导致 Vue 计算属性被计算？

Question

我对计算属性的理解是，如果模板中没有使用计算属性，则不应该计算它。然而，当有一个计算属性的观察者时，这个计算属性会被计算。

我知道这不是所需的应用程序架构，但我的问题是，它以这种方式工作的事实是否是所需的 Vue 行为，或者是当前实现方式的一些副作用，并且在未来的版本中可能会发生变化？

或者换句话说： 如果计算的属性没有在模板中使用并且在代码库中没有其他显式的 getter（除了观察者），是否应该评估它？

例子：

<template>
  <div>
        <button @click="counter++">+1</button>
        {{ counter }}
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      counter: 0,
    };
  },
  computed: {
    notUsedInTemplate() {
      console.log("notUsedInTemplate computed called");
      return this.counter + 1;
    },
  },
  watch: {
    notUsedInTemplate() {
      console.log("notUsedInTemplate watch called");
    },
  },
};
</script>

沙盒链接：https://codesandbox.io/s/computed-sandbox-ru3n3?file=/src/components/Main.vue:0-818

Answer 1

如果模板中没有使用计算属性，则不应该计算它

...不正确。正确的说法是：

如果计算的属性没有被使用（在任何地方），它就不应该被评估

使用watch 评估属性。其实watch和模板重渲染很像（在vue 3里重渲染其实没什么特别的watchEffect）

因为看（任何东西）：

1. Vue 1st 需要运行代码 - 在本例中为 notUsedInTemplate getter - 以找出它正在访问的响应数据（因此 this.counter 被跟踪为依赖项）
2. 当this.counter 发生变化时，观察者再次运行notUsedInTemplate getter，以便将新值与前一个值进行比较
3. 如果值更改，它会运行回调（在您的示例中记录）

所以回答问题：

1. 是的，这是期望的行为，因为您的观察者不会跟踪 notUsedInTemplate 计算属性的更改，而是用于计算其值的基础数据
2. Watcher 正在访问计算属性，无需在其他任何地方使用它

好的，更多细节为什么这样工作

Vue 反应性总是有 2 个阶段：

1. 第 1 阶段 - 运行代码（无论是模板还是 watch expression/fn）并收集所有依赖项（例如，代码“触及”的任何反应性数据）
2. 第 2 阶段 - 跟踪依赖项。如果任何依赖发生变化，重新运行回调（或渲染函数）

请参阅文档中的这一章 - How Changes Are Tracked - 该示例明确提到仅模板重新渲染（它使用 Vue 自己创建的观察器），但所有这些都适用于 all watchers，包括用户创建的那些

Answer 2

您对计算属性的看法是正确的。计算属性中的任何内容都将附加到 vue 实例并在模板中访问。

所以，如果它没有在模板中使用，它不应该在计算中。

computed 属性是声明性的，而watch 是强制性的。

computed: {
// a computed getter
reversedMessage: function () {
  // `this` points to the vm instance
  return this.message.split('').reverse().join('')
 }
}

最好的部分是我们以声明方式创建了这种依赖关系：计算的 getter 函数没有副作用，这使得测试和理解更容易。

watch 是查找更改并更新值的函数。

watch: {
firstName: function (val) {
  this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
  this.fullName = this.firstName + ' ' + val
 }
}

通过使用计算的 getter 属性，您只是让 vue 可以轻松地以声明的方式跟踪更改和更新，但是您可以使用 watch 做同样的事情，但这是必要的，并且 vue 需要查找更改并且每次更改都需要触发该函数调用并稍后执行该函数。

more info