vue3.2计算属性使用

在 Vue 3.2 中，计算属性的使用方式与之前的版本相同。计算属性是一种在模板中进行数据计算的方式，其结果会被缓存起来，只有在相关依赖发生改变时才会重新计算。

计算属性的定义方式如下：

<template>
  <div>
    {{ reversedMessage }}
  </div>
</template>

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

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

在模板中，可以直接使用计算属性 `reversedMessage`，其结果为 `!euV olleH`。当 `message` 的值发生改变时，`reversedMessage` 会自动重新计算，并更新模板中的值。

需要注意的是，在 Vue 3.2 中，计算属性可以使用 `computed` 函数进行定义。这个函数可以带有一个参数，用于指定计算属性的依赖。

computed(() => {
  // 计算属性的函数体
}, [依赖1, 依赖2, ...]);

这样可以明确计算属性的依赖，从而更好地利用 Vue 3 的响应式系统。