vue3语法糖 计算属性用法

Vue 3 中的计算属性使用方法与 Vue 2 中有些许变化，下面是一个简单的示例：

<template>
  <div>
    <p>{{ fullName }}</p>
    <p>{{ reversedFullName }}</p>
  </div>
</template>

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

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 计算属性 fullName
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

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

    return {
      firstName,
      lastName,
      fullName,
      reversedFullName
    };
  }
};
</script>

在上面的示例中，我们使用了 `setup()` 函数来定义组件的逻辑部分。通过 `ref` 函数创建了两个响应式变量 `firstName` 和 `lastName`，然后使用 `computed` 函数创建了计算属性 `fullName` 和 `reversedFullName`。

计算属性 `fullName` 使用了箭头函数来返回拼接后的全名，它依赖于 `firstName` 和 `lastName` 的值，当它们的值发生改变时，`fullName` 也会被重新计算。

计算属性 `reversedFullName` 使用了链式调用的方式，首先获取了 `fullName` 的值，然后使用 `split('')` 将其转换为字符数组，再调用 `reverse()` 方法来反转数组顺序，最后使用 `join('')` 将数组转换为字符串。同样地，当 `fullName` 的值发生改变时，`reversedFullName` 也会被重新计算。

在模板中，我们通过 `{{ }}` 来插值展示计算属性的值。

请注意，上述示例使用了 Vue 3 中的 Composition API，这是 Vue 3 中全新的功能。如果你仍在使用 Vue 2，计算属性的用法与之前相同，不需要任何特殊的语法糖。