Vue.js 中计算属性的基础知识：组合 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 > 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 中反应式数据的操作。

以上是Vue.js 中计算属性的基础知识：组合 API的详细内容。更多信息请关注PHP中文网其他相关文章！