vue3 computed

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

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

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

解释说明：

1. ref: 用于创建一个响应式的引用对象。这里 message 是一个响应式的字符串。
2. computed: 用于定义计算属性。计算属性会根据其依赖的响应式数据自动更新。在这个例子中，reversedMessage 是一个计算属性，它依赖于 message 的值，并在 message 变化时自动更新。
3. 模板中的使用: 在模板中，我们直接使用了 message 和 reversedMessage，Vue 会自动处理它们的响应式更新。

希望这个示例能帮助你理解 Vue 3 中的 computed。