vue3 计算属性用法

Vue 3中的计算属性用法与Vue 2基本相同。计算属性是一种根据依赖值动态计算并返回结果的属性，可以在模板中使用。

在Vue 3中，你可以使用 `computed` 函数来创建计算属性。这个函数接收一个 getter 函数作为参数，getter 函数中定义了计算属性的逻辑。例如：

import { computed } from 'vue';

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: computed(() => {
      return this.firstName + ' ' + this.lastName;
    })
  }
};

上面的例子中，我们创建了一个计算属性 `fullName`，它根据 `firstName` 和 `lastName` 的值动态计算出完整的姓名。

在模板中使用计算属性很简单，只需像访问普通属性一样使用即可：

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

当 `firstName` 或 `lastName` 的值发生变化时，`fullName` 会自动重新计算并更新。

除了 getter 函数外，你还可以给 `computed` 函数传递一个 setter 函数来创建带有 setter 的计算属性。这样你就可以通过修改计算属性的值来影响其他相关的数据。

希望对你有所帮助！如果还有其他问题，请随时提问。