Vue3中可读可写的计算属性（ComputedProperties）的使用场景

在 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 中非常强大的工具，能够帮助你简化模板中的复杂逻辑，并提高代码的可读性和可维护性。