第五阶段：Vue3核心深度深挖(第74天)（Vue3计算属性进阶）

好的，我们来详细探讨一下 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 应用中的数据派生和复杂状态管理逻辑。

第五阶段：Vue3核心深度深挖(第74天)（Vue3计算属性进阶）

核心概念：计算属性 (computed)

基础语法（只读）

进阶一：多依赖监听

进阶二：可写计算属性 (get/set)

实战应用场景

最佳实践与注意事项

核心概念：计算属性 (`computed`)

进阶二：可写计算属性 (`get`/`set`)