在 Vue 3 中,computed
属性用于创建基于它们的响应式依赖进行缓存的计算属性。这意味着只有当计算属性依赖的响应式数据发生变化时,计算属性才会重新计算。这与方法不同,方法每次被调用时都会执行。
要使用 computed
属性来创建响应式的方法,你可以在 setup
函数中定义一个 computed
属性,它接收一个 getter 函数。这个 getter 函数可以返回任何类型的值,包括调用其他方法或执行复杂计算的结果。
以下是如何在 Vue 3 的 <script setup>
语法中使用 computed
属性的示例:
<script setup>
import { ref, computed } from 'vue';
// 定义一个响应式引用
const number = ref(1);
// 创建一个计算属性,它依赖于响应式引用 'number'
const doubled = computed(() => number.value * 2);
// 创建一个计算属性,它依赖于另一个计算属性
const squared = computed(() => doubled.value * doubled.value);
// 你还可以在计算属性中调用方法
function sum(a, b) {
return a + b;
}
const total = computed(() => sum(number.value, 5));
</script>
<template>
<div>
<p>Number: {{ number }}</p>
<p>Doubled: {{ doubled }}</p>
<p>Squared: {{ squared }}</p>
<p>Total: {{ total }}</p>
</div>
</template>
在这个例子中,我们定义了三个计算属性:
doubled
依赖于响应式引用number
并返回它的两倍。squared
依赖于doubled
并返回它的平方。total
依赖于number
并返回number
与 5 的和。
计算属性是惰性的,只有在它们的依赖项发生变化时才会重新计算。这使得它们非常适合用于执行昂贵的计算或需要根据响应式数据变化而更新的 UI 显示。
注意,计算属性默认是只读的。如果你需要使计算属性可写,可以提供一个 set
函数。但是,通常建议避免使计算属性可写,因为这可能会导致数据流难以追踪和维护。如果确实需要可写的计算属性,应该仔细考虑数据流和组件的状态管理策略。