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');

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

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

<!-- 
解释说明:
1. `ref` 用于创建一个响应式的变量 `message`。
2. `computed` 用于定义一个计算属性 `reversedMessage`，它依赖于 `message` 的值。
3. 计算属性会自动追踪其依赖项的变化，并在依赖项变化时重新计算。
4. 在模板中可以直接使用 `message` 和 `reversedMessage`。
-->