vue3 计算属性

// Vue 3 计算属性示例

<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 Vue 3!');

    // 定义一个计算属性，基于 message 的值进行计算
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

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

解释说明：

1. ref：用于定义响应式的基本数据类型（如字符串、数字等）。在这个例子中，message 是一个响应式的字符串。
2. computed：用于定义计算属性。计算属性会根据其依赖的响应式数据自动更新。在这个例子中，reversedMessage 是一个计算属性，它依赖于 message 的值，并返回反转后的字符串。
3. 模板部分：在模板中使用了两个插值表达式，分别显示原始的 message 和计算后的 reversedMessage。

这个例子展示了如何在 Vue 3 中使用计算属性来处理和展示数据。