Vue 3 中可读可写的计算属性（Computed Properties）的使用场景

在 Vue 3 中，计算属性（Computed Properties）是一种基于响应式依赖进行缓存的属性。它们通常用于处理复杂的逻辑，并且只有当依赖的响应式数据发生变化时，才会重新计算。计算属性非常适合用于处理模板中的复杂表达式，使得代码更加简洁和可维护。

基本用法

在 Vue 3 中，你可以使用 computed 函数来定义计算属性。computed 函数接受一个 getter 函数，并返回一个不可变的 ref 对象。

<template><div><p>原始消息: {{ message }}</p><p>反转后的消息: {{ reversedMessage }}</p></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const message = ref('Hello, Vue 3!');// 计算属性const reversedMessage = computed(() => {return message.value.split('').reverse().join('');});return {message,reversedMessage,};},
};
</script>

计算属性的缓存

计算属性是基于它们的响应式依赖进行缓存的。只有当依赖的响应式数据发生变化时，计算属性才会重新计算。这意味着如果依赖的数据没有变化，多次访问计算属性会立即返回之前缓存的结果，而不会重新执行计算逻辑。

可写的计算属性

默认情况下，计算属性是只读的。如果你需要创建一个可写的计算属性，你可以提供一个包含 get 和 set 函数的对象。

<template><div><p>名字: {{ fullName }}</p><input v-model="firstName" placeholder="First Name" /><input v-model="lastName" placeholder="Last Name" /></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const firstName = ref('John');const lastName = ref('Doe');// 可写的计算属性const fullName = computed({get() {return `${firstName.value} ${lastName.value}`;},set(newValue) {const [first, last] = newValue.split(' ');firstName.value = first;lastName.value = last;},});return {firstName,lastName,fullName,};},
};
</script>

在这个例子中，fullName 是一个可写的计算属性。当你修改 fullName 时，firstName 和 lastName 也会相应地更新。

计算属性的依赖

计算属性会自动追踪它们的依赖。如果计算属性依赖于某个响应式数据，当这个数据发生变化时，计算属性会自动重新计算。

<template><div><p>数量: {{ quantity }}</p><p>单价: {{ price }}</p><p>总价: {{ totalPrice }}</p><button @click="increaseQuantity">增加数量</button></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const quantity = ref(2);const price = ref(10);// 计算属性const totalPrice = computed(() => {return quantity.value * price.value;});const increaseQuantity = () => {quantity.value++;};return {quantity,price,totalPrice,increaseQuantity,};},
};
</script>

在这个例子中，totalPrice 计算属性依赖于 quantity 和 price。当 quantity 或 price 发生变化时，totalPrice 会自动重新计算。

总结

• 计算属性是基于响应式依赖进行缓存的属性。
• 使用 computed 函数来定义计算属性。
• 计算属性可以是只读的，也可以是可写的。
• 计算属性会自动追踪它们的依赖，并在依赖发生变化时重新计算。

计算属性是 Vue 3 中非常强大的工具，能够帮助你简化模板中的复杂逻辑，并提高代码的可读性和可维护性。