vue3计算属性的使用

在Vue 3中，计算属性的使用与Vue 2中基本相同。计算属性是一种在模板中声明式依赖的属性，其值是根据其他数据计算得出的。在Vue 3中，计算属性可以通过 `computed` API 来定义，具体使用方法如下：

1. 在Vue 3组件中定义计算属性：

import { computed } from 'vue'

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

2. 在模板中使用计算属性：

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

在上面的示例中，我们定义了一个计算属性 `fullName`，其值是由 `firstName` 和 `lastName` 计算得出的。在模板中，我们可以直接使用 `fullName`。

需要注意的是，在Vue 3中，计算属性的定义方式也可以通过 `computed()` 函数来进行。例如：

import { computed } from 'vue'

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: computed(function() {
      return `${this.firstName} ${this.lastName}`
    })
  }
}

这种方式定义计算属性，可以更加灵活地控制计算属性的行为，例如可以通过 `get` 和 `set` 函数来控制计算属性的读写。