computed计算属性 vue3

在Vue 3中，计算属性的用法与Vue 2基本保持一致。你可以使用`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

state.lastName = 'Smith';
console.log(fullName.value); // 输出: Jane Smith

在上面的示例中，我们使用`reactive`函数创建了一个响应式对象`state`，其中包含`firstName`和`lastName`两个属性。然后，我们使用`computed`函数创建了一个计算属性`fullName`，它根据`state`中的`firstName`和`lastName`计算出全名。

通过访问`fullName.value`，我们可以获取计算属性的值。当`state`中的属性发生变化时，计算属性会自动更新其值。

希望这个例子能帮助你理解Vue 3中计算属性的用法。如果你有任何进一步的问题，请随时提问！