vue3 使用多个computed

在 Vue.js 3 中，使用多个 computed 计算属性是非常常见的，特别是在复杂的单向数据绑定场景中。每个 computed 属性都是基于视图层的状态（通常是依赖于其他响应式数据）动态计算的结果。下面是关于如何在 Vue 项目中使用多个 computed 的基本概念和示例：

1. **定义 computed**: 在 Vue 组件中的 `data` 或者 `setup` 函数中，你可以声明一个或多个 computed 方法。例如：

export default {
  data() {
    return {
      name: 'Alice',
      age: 25,
      fullName: '张三'
    };
  },
  computed: {
    // 第一个计算属性，取名字和年龄拼接
    displayName() {
      return `${this.name} ${this.age}`;
    },
    
    // 第二个计算属性，基于 fullName 字符串处理
    titleCaseName() {
      return this.fullName.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
    }
  }
}

2. **引用 computed**: 在模板中，你可以直接像访问普通属性一样使用 computed。如：

<div>{{ displayName }}</div> <!-- 显示 "Alice 25" -->
<div>{{ titleCaseName }}</div> <!-- 显示 "张三" -->

3. **副作用管理**: 如果你的 computed 有副作用，比如异步操作，应该谨慎使用。Vue 提供了 `setup` 函数，其中的 `ref` 和 `async`/`await` 可以更好地管理这些情况。