vue.js - Vue 中的方法是响应式(Reactive)的吗？

Question

我已经使用 Vue 一段时间了，我的经验一直是，如果更新其底层 react 性数据，方法将重新计算。我在 SO 上遇到了相互矛盾的信息:

我试图回答 this question ，并多次被告知情况并非如此。

接受的答案 here表示“[a method] 只会在您显式调用它时进行评估。”

我搜索了文档，但没有看到任何非常清楚的内容。

如果它们不是 react 性的，那么为什么这个例子有效？

<ul>
  <li v-for="animal in animals" :key="animal.id">
    <span v-if="isAwesome(animal)">{{ animal.name }}</span>
  </li>
</ul>

export default {
  data() {
    return {
      awesomeAnimalIds: [],
      animals: [
        { id: 1, name: 'dog' },
        { id: 5, name: 'cat' },
        { id: 9, name: 'fish' },
      ],
    };
  },
  created() {
    setTimeout(() => {
      this.awesomeAnimalIds.push(5);
    }, 1000);
    setTimeout(() => {
      this.awesomeAnimalIds.push(9);
    }, 2000);
  },
  methods: {
    isAwesome(animal) {
      return this.awesomeAnimalIds.includes(animal.id);
    },
  },
};

我会 真的喜欢有一个明确的和令人满意的答案，这个社区可以引用。

Answer 1

基于 How Changes Are Tracked从文档中，这是发生了什么:

为组件实例创建了一个特殊的观察器，以确定何时需要重新渲染。

Vue 转换 data 的所有属性到 getter 和 setter。

get animals() {
  // Add dependency: potentially trigger a re-render if animals updates
  ...
}
set animals() {
  // Notify the watcher that animals has been updated
  ...
}
get awesomeAnimalIds() {
  // Add dependency: potentially trigger a re-render if awesomeAnimalIds updates
  ...
}
set awesomeAnimalIds() {
  // Notify the watcher that awesomeAnimalIds has been updated
  ...
}

模板已呈现。在渲染期间，调用 isAwesome由模板制成。

在isAwesome的正文中, awesomeAnimalIds 的 setter/getter 被调用。

观察者建立对 awesomeAnimalIds 的依赖领域data .

超时后，awesomeAnimalIds被更新，它调用 awesomeAnimalIds二传手。

因为模板依赖于 data收到通知的字段，将触发重新渲染。

重复步骤 (3)。

从这个和上面的例子，我们可以得出以下结论:

A method call made from a template establishes a reactive dependency on the subset of data fields used in the method call stack. If the underlying fields are updated, it will trigger a re-render of the component.

有一种常见的误解，认为从模板调用方法时“仅调用一次”或“即发即弃”。显然情况并非总是如此，因为 方法可以建立 react 性依赖 .
那么我们什么时候应该使用计算属性而不是方法呢？
请参阅 Computed Caching vs Methods 上的指南部分.这是我的看法:

计算属性只会在其响应式依赖项发生变化时重新评估。 IE。它使用缓存来提高效率。

计算属性应该是无副作用的。例如你不应该打电话fetch从他们。

如果可能，出于效率原因，始终更喜欢计算属性而不是方法。

如果您有副作用或需要传入参数(如原始问题中所示)，请使用方法。