好的，我们来详细探讨一下 Vue 3 中计算属性 computed 的进阶用法，特别是多依赖监听以及如何创建只读或可写的计算属性。
核心概念：计算属性 (computed)
计算属性是 Vue 响应式系统的核心特性之一。它允许你定义一个依赖于其他响应式数据（如 ref, reactive 对象中的属性，或其他 computed）的值。当这些依赖项发生变化时，计算属性会自动重新计算其值。这避免了在模板或方法中重复复杂的逻辑，并提供了高效的缓存机制。
基础语法（只读）
最常见的用法是定义一个只读的计算属性，通过一个函数（getter 函数）来返回计算值：
javascript
import { ref, computed } from 'vue';
const firstName = ref('张');
const lastName = ref('三');
// 只读计算属性：全名
const fullName = computed(() => {
return firstName.value + ' ' + lastName.value;
});
console.log(fullName.value); // 输出: "张 三"在这个例子中：
fullName依赖于firstName.value和lastName.value。- 当
firstName或lastName改变时，fullName会自动更新。 fullName本身是只读的，尝试修改fullName.value会导致错误。
进阶一：多依赖监听
计算属性天生就支持监听多个依赖项。你只需要在 getter 函数内访问这些响应式变量即可。Vue 的响应式系统会自动追踪这些依赖关系。
javascript
import { ref, computed } from 'vue';
const quantity = ref(2);
const unitPrice = ref(10);
const discount = ref(0.1); // 10% 折扣
// 计算总价 (多依赖)
const totalPrice = computed(() => {
const basePrice = quantity.value * unitPrice.value;
return basePrice * (1 - discount.value);
});
console.log(totalPrice.value); // 输出: 18 (2 * 10 * 0.9)
// 改变任意依赖都会触发重新计算
quantity.value = 3;
console.log(totalPrice.value); // 输出: 27 (3 * 10 * 0.9)关键点：
- 计算属性
totalPrice自动监听了quantity,unitPrice,discount这三个依赖项。 - 只要其中任意一个值发生变化，
totalPrice就会重新计算。 - 不需要手动管理依赖列表，Vue 在运行时自动完成依赖收集。
进阶二：可写计算属性 (get/set)
有时你可能需要一个既能读取又能写入的计算属性。例如，一个全名计算属性，既可以根据姓和名计算出来，也可以直接设置全名来反向更新姓和名。
这时，你需要向 computed 传入一个包含 get 和 set 函数的对象：
javascript
import { ref, computed } from 'vue';
const firstName = ref('张');
const lastName = ref('三');
// 可写计算属性：全名
const writableFullName = computed({
// getter: 计算全名
get() {
return firstName.value + ' ' + lastName.value;
},
// setter: 设置全名时，解析并更新姓和名
set(newFullName) {
const names = newFullName.split(' ');
if (names.length >= 2) {
firstName.value = names[0]; // 更新依赖项 firstName
lastName.value = names[names.length - 1]; // 更新依赖项 lastName
} else {
console.warn('请输入有效的全名（至少包含姓和名）');
}
}
});
console.log(writableFullName.value); // 输出: "张 三"
// 通过 setter 写入计算属性
writableFullName.value = '李 四'; // 触发 set 函数
console.log(firstName.value); // 输出: "李"
console.log(lastName.value); // 输出: "四"
console.log(writableFullName.value); // 输出: "李 四" (getter 重新计算)关键点：
get()函数定义了如何计算属性的值（读取时调用）。set(newValue)函数定义了当尝试给计算属性赋值时应该做什么（写入时调用）。通常在set内部更新计算属性所依赖的原始响应式数据。- 在
set函数中更新依赖项 (firstName.value,lastName.value) 会触发计算属性writableFullName的get函数重新执行，从而得到更新后的值。 - 这使得计算属性具备了双向绑定的能力，在需要将计算值反向同步到源数据的场景非常有用（如复杂表单字段）。
实战应用场景
-
表单联动/复杂校验：
- 一个订单表单，总价
total由数量quantity、单价price和折扣discount计算得出（多依赖只读）。 - 或者，一个用户信息表单，全名
fullName可读写，绑定到输入框，修改全名自动拆解更新姓和名字段（可写计算属性）。
- 一个订单表单，总价
-
数据过滤/转换：
- 从原始列表
items和过滤条件filterText计算出过滤后的列表filteredItems（多依赖只读）。
- 从原始列表
-
状态派生：
- 根据多个开关状态 (
isFeatureAEnabled,isFeatureBEnabled) 计算出一个组合状态combinedStatus（多依赖只读）。 - 或者，组合状态
combinedStatus可被外部修改，并反向更新各个开关状态（可写计算属性）。
- 根据多个开关状态 (
最佳实践与注意事项
- 避免副作用 ：计算属性的
get函数应该是纯函数，只进行计算并返回值，不要执行异步操作或修改 DOM 等其他状态。副作用应使用watch或watchEffect。 - 缓存优势 ：计算属性会基于其依赖关系进行缓存。只有当依赖变化时才会重新计算。多次访问
computed.value会返回缓存的（未变化的）结果，非常高效。 - 依赖追踪 ：确保所有依赖项都是在
get函数内部访问到的响应式变量。如果在get函数外访问或使用了非响应式数据，依赖追踪会失效。 - 可写计算属性 ：谨慎使用
set。确保set操作清晰地映射到对底层依赖项的更新。过度使用可能导致逻辑复杂化。 - 计算属性 vs 方法 ：对于不会缓存、每次调用都执行的逻辑，或者需要传递参数的场景，使用方法 (
methods) 更合适。对于依赖于响应式数据且需要缓存结果的派生值，使用计算属性。
通过灵活运用 computed 的多依赖监听和可写特性，你可以更优雅地处理 Vue 应用中的数据派生和复杂状态管理逻辑。