vue3计算属性

// Vue 3 计算属性示例

<template>
  <div>
    <p>原始消息: {{ message }}</p>
    <p>计算后的消息: {{ reversedMessage }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 定义一个响应式变量
    const message = ref('Hello Vue 3');

    // 使用 computed 创建一个计算属性
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

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

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 显示了两个段落，一个是原始消息 message，另一个是通过计算属性 reversedMessage 反转后的消息。

2. 脚本部分 (<script>):

   • 使用 ref 定义了一个响应式变量 message。
   • 使用 computed 创建了一个计算属性 reversedMessage，它依赖于 message 的值，并在 message 发生变化时自动更新。
   • setup 函数返回的对象中包含 message 和 reversedMessage，使它们可以在模板中使用。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加样式，这里没有具体样式。