vue3.2中如何写计算属性

在Vue 3.2中，你可以使用 `computed` 函数来定义计算属性。这个函数接收一个对象参数，其中键是计算属性的名称，值是一个函数，该函数返回计算属性的值。

下面是一个例子：

import { computed } from 'vue'

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

    const fullName = computed(() => {
      return `${firstName} ${lastName}`
    })

    return {
      fullName
    }
  }
}

在上面的例子中，我们定义了一个 `fullName` 计算属性，它返回 `firstName` 和 `lastName` 的组合。我们使用 `computed` 函数将其定义为一个响应式的计算属性，并将其返回给组件的模板。

在模板中，我们可以像访问普通的数据属性一样访问计算属性：

<template>
  <div>
    <p>First name: {{ firstName }}</p>
    <p>Last name: {{ lastName }}</p>
    <p>Full name: {{ fullName }}</p>
  </div>
</template>

在上面的模板中，我们使用双花括号语法访问计算属性 `fullName` 的值。每当 `firstName` 或 `lastName` 发生变化时，`fullName` 将自动重新计算并更新其值。