Vuejs 中计算属性的基础知识：组合 API

计算属性

让我们考虑一个响应式对象：

const author = reactive({
  name: 'john doe',
  books: [
    'vue 2 - advanced guide',
    'vue 3 - basic guide',
    'vue 4 - the mystery'
  ]
})

在此对象中，我们要显示指示作者是否已出版书籍的消息：

<p>has published books:</p>
<span>{{ author.books.length &gt; 0 ? 'yes' : 'no' }}</span>

我们根据author.books进行了计算。 模板中显示的消息取决于author.books的值。我们可以在模板中多次使用这个计算，但不想重复编写。因此，计算属性应该用于涉及反应性数据的复杂逻辑。

使用计算属性示例：

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'john doe',
  books: [
    'vue 2 - advanced guide',
    'vue 3 - basic guide',
    'vue 4 - the mystery'
  ]
})

// a computed reference
const publishedbooksmessage = computed(() => {
  return author.books.length > 0 ? 'yes' : 'no'
})
</script><template><p>has published books:</p>
  <span>{{ publishedbooksmessage }}</span>
</template>

在此示例中，我们定义了一个计算属性，名为publishedbooksmessage。 computed() 函数需要一个 getter 函数，返回值是一个计算引用。您可以使用publishedbooksmessage.value 访问计算结果。但是，在模板中，计算引用会自动展开，因此您可以在不添加 .value 的情况下引用它们。

立即学习“前端免费学习笔记（深入）”；

计算属性跟踪它们的反应依赖性。 vue 知道publishedbooksmessage 的计算取决于author.books 的值，当author.books 发生变化时，它会更新所有依赖publishedbooksmessage 的上下文。

计算缓存与方法

使用以下方法可以达到相同的结果：

<p>{{ calculatebooksmessage() }}</p>

在组件中：

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

您可以将相同的函数定义为方法，而不是计算属性。两种方法产生相同的结果。但是，我想强调计算属性是被缓存的。这意味着
仅当其反应性依赖项发生变化时，才会重新评估计算属性。如果组件重新渲染时author.books的值没有改变，它将返回之前计算的结果，而不需要重新运行getter函数

为什么需要缓存？

考虑这样一个场景，我们有一个昂贵的计算列表，需要循环遍历一个大数组并执行许多计算。如果我们有其他依赖于列表的计算属性，在没有缓存的情况下，我们将比必要的更频繁地运行列表的 getter！

最佳实践

getter 应该没有副作用。计算的 getter 函数仅执行纯计算并避免副作用，这一点很重要。

例如，不要更改其他状态、发出异步请求或更改计算 getter 内的 dom！将计算属性视为从其他值派生值的一种方式 - 唯一的责任是计算并返回该值。

结论

我们学习了如何在 vue.js 中使用反应式数据执行计算。为了确保应用程序的高性能，我们应该使用计算属性来进行基于 vue.js 中反应式数据的操作。