vue3使用computed

<template>
  <div>
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue3');

    // 计算属性 - computed
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

    return {
      message,
      reversedMessage
    };
  }
};
</script>

解释说明：

• ref：用于定义响应式的数据变量。在这个例子中，message 是一个响应式的字符串。
• computed：用于定义计算属性。计算属性会基于它的依赖进行缓存，只有当依赖发生变化时才会重新计算。这里 reversedMessage 是一个计算属性，它依赖于 message 的值，并返回反转后的字符串。
• setup：Vue 3 中的组合式 API 入口函数，用于替代选项式 API 中的 data、methods 等选项。

通过这个例子，你可以看到如何使用 computed 来创建一个依赖于其他响应式数据的计算属性，并且在模板中直接使用它。