vue3里的computed

在Vue 3中，computed属性仍然是一种非常有用的特性，它允许你在模板中使用计算属性，这些计算属性会根据依赖的响应式数据进行自动更新。Vue 3对computed属性进行了一些改进和优化。

在Vue 3中，你可以使用`computed`函数来定义计算属性。与Vue 2中使用`computed`选项不同，Vue 3中的`computed`函数是一个用于创建计算属性的工厂函数。你可以将计算属性的逻辑封装在这个函数中，并返回一个包含`get`和`set`方法的对象。

下面是一个示例，展示了如何在Vue 3中使用`computed`函数来定义计算属性：

import { computed, reactive } from 'vue';

const state = reactive({
  firstName: 'John',
  lastName: 'Doe'
});

const fullName = computed(() => {
  return state.firstName + ' ' + state.lastName;
});

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

state.firstName = 'Jane';
console.log(fullName.value); // 输出 "Jane Doe"

在上面的示例中，我们使用`reactive`函数创建了一个响应式对象`state`，其中包含了`firstName`和`lastName`两个属性。然后，我们使用`computed`函数创建了一个计算属性`fullName`，它返回了`state.firstName + ' ' + state.lastName`的结果。通过访问`fullName.value`，我们可以获取计算属性的值。

需要注意的是，在Vue 3中，计算属性的返回值是一个`ref`对象，因此需要通过`.value`来访问其实际的值。