计算属性
让我们考虑一个响应式对象：
const author = reactive({
name: 'john doe',
books: [
'vue 2 - advanced guide',
'vue 3 - basic guide',
'vue 4 - the mystery'
]
})
在此对象中，我们要显示指示作者是否已出版书籍的消息：
has published books:
{{ author.books.length > 0 ? 'yes' : 'no' }}
我们根据author.books进行了计算。 模板中显示的消息取决于author.books的值。我们可以在模板中多次使用这个计算，但不想重复编写。因此，计算属性应该用于涉及反应性数据的复杂逻辑。
使用计算属性示例：
has published books:
{{ publishedbooksmessage }}
在此示例中，我们定义了一个计算属性，名为publishedbooksmessage。 computed() 函数需要一个 getter 函数，返回值是一个计算引用。您可以使用publishedbooksmessage.value 访问计算结果。但是，在模板中，计算引用会自动展开，因此您可以在不添加 .value 的情况下引用它们。
立即学习“前端免费学习笔记（深入）”；
计算属性跟踪它们的反应依赖性。 vue 知道publishedbooksmessage 的计算取决于author.books 的值，当author.books 发生变化时，它会更新所有依赖publishedbooksmessage 的上下文。
计算缓存与方法
使用以下方法可以达到相同的结果：
{{ calculatebooksmessage() }}
在组件中：
function calculateBooksMessage() {
return author.books.length > 0 ? 'Yes' : 'No'
}
您可以将相同的函数定义为方法，而不是计算属性。两种方法产生相同的结果。但是，我想强调计算属性是被缓存的。这意味着
仅当其反应性依赖项发生变化时，才会重新评估计算属性。如果组件重新渲染时author.books的值没有改变，它将返回之前计算的结果，而不需要重新运行getter函数
为什么需要缓存？
考虑这样一个场景，我们有一个昂贵的计算列表，需要循环遍历一个大数组并执行许多计算。如果我们有其他依赖于列表的计算属性，在没有缓存的情况下，我们将比必要的更频繁地运行列表的 getter！
最佳实践
getter 应该没有副作用。计算的 getter 函数仅执行纯计算并避免副作用，这一点很重要。
例如，不要更改其他状态、发出异步请求或更改计算 getter 内的 dom！将计算属性视为从其他值派生值的一种方式 - 唯一的责任是计算并返回该值。
结论
我们学习了如何在 vue.js 中使用反应式数据执行计算。为了确保应用程序的高性能，我们应该使用计算属性来进行基于 vue.js 中反应式数据的操作。
