vue3使用computed

### 如何在 Vue 3 中使用 Computed 属性

Computed 属性用于声明依赖于其他响应式数据的计算逻辑。这些属性会基于其依赖项缓存结果，只有当依赖的数据发生变化时才会重新求值[^2]。

#### 基本语法
定义 `computed` 属性的方式是在组件选项中加入 `computed` 对象：

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}

此例子展示了如何通过 `reversedMessage` 计算属性反转字符串消息的内容。

#### 使用 Setup 函数中的 Computed API
Vue 3 推荐使用组合式 API (Composition API)，其中可以通过 `setup()` 方法引入 `computed` 来创建计算属性：

import { ref, computed } from 'vue'

export default {
  setup() {
    const message = ref('Hello')
    
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    return {
      message,
      reversedMessage
    }
  }
}

这段代码同样实现了上述功能，但是采用了更灵活的 Composition API 方式。

#### 缓存机制的优势
相比于方法调用，`computed` 的一个重要特性就是它的懒加载和自动缓存行为。这意味着只要依赖未改变，则不会重复执行昂贵的操作，从而提高性能效率。