vue3是使用计算属性

Vue3同样支持计算属性的使用。在Vue3中，计算属性的定义方式与Vue2相似，可以通过在`computed`选项中定义一个函数来创建计算属性。计算属性会根据其依赖的响应式数据进行缓存，只有在依赖发生变化时才会重新计算。

例如，下面是一个使用计算属性的Vue3示例：

import { computed, reactive } from 'vue';

const state = reactive({
  userName1: 'John',
  userName2: 'Doe',
  age: 25
});

const userName = computed(() => {
  console.log("我是计算属性调用的");
  return state.userName1 + ' ' + state.userName2;
});

console.log(userName.value); // 输出: "John Doe"

在上面的示例中，我们使用`computed`函数创建了一个计算属性`userName`，它依赖于`state.userName1`和`state.userName2`。当我们访问`userName.value`时，计算属性会被调用并返回计算结果。由于计算属性的缓存机制，后续对`userName.value`的访问不会再触发计算属性的重新计算，除非其依赖的数据发生变化。

总结起来，Vue3中的计算属性与Vue2中的计算属性使用方式相似，都可以通过`computed`选项来定义一个函数，并且会根据依赖的响应式数据进行缓存。