vue3的computed

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

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

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

解释说明：

1. ref: 用于创建一个响应式的变量 message，初始值为 'Hello Vue 3!'。
2. computed: 用于定义计算属性 reversedMessage。它会根据 message 的值自动生成反转后的字符串。
3. 模板部分:
   • 显示原始的 message。
   • 显示通过计算属性生成的反转后的 message。

每当 message 发生变化时，reversedMessage 会自动重新计算并更新视图。