Composition API 计算属性全面解析，从简单到对象深入掌握

在 Vue3 中，Composition API 提供了一种全新的方式来组织和复用逻辑，其中计算属性（Computed Properties）是一个非常重要的特性。计算属性允许我们基于组件的状态创建复杂的逻辑，并且这些逻辑会自动根据依赖项的变化而更新。本文将从简单到深入，全面解析 Vue3 中的计算属性。

一、计算属性基础

1.1 计算属性简介

计算属性是基于组件的响应式状态（如 ref 或 reactive）计算得出的值。它们是懒惰的，只有在相关响应式状态发生变化时才会重新计算。这使得计算属性非常适合用于处理复杂逻辑，如数据转换、格式化或基于现有数据派生新数据。

1.2 基本用法

在 Vue3 中，你可以使用 computed 函数来创建计算属性。以下是一个简单的例子：

import { ref, computed } from 'vue';

const count = ref(0);

const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 输出 0
count.value = 1;
console.log(doubleCount.value); // 输出 2

在这个例子中，doubleCount 是一个计算属性，它依赖于 count 的值。每当 count 发生变化时，doubleCount 也会自动更新。

二、进阶用法

2.1 使用 get 和 set 方法

计算属性可以通过 get 和 set 方法来定义更复杂的逻辑。get 方法用于获取计算属性的值，而 set 方法用于设置计算属性的值。

import { ref } from 'vue';

const state = ref({
  count: 0
});

const doubleCount = computed({
  get() {
    return state.value.count * 2;
  },
  set(newValue) {
    state.value.count = newValue / 2;
  }
});

console.log(doubleCount.value); // 输出 0
doubleCount.value = 5;
console.log(state.value.count); // 输出 2.5

在这个例子中，doubleCount 的 set 方法允许我们动态地设置 count 的值。

2.2 动态设置依赖项

有时候，你可能希望计算属性的依赖项是动态的。在 Vue3 中，你可以使用函数形式的计算属性来实现这一点。

import { ref, computed } from 'vue';

const items = ref(['apple', 'banana', 'cherry']);

const itemNames = computed(() => items.value.map(item => item.charAt(0)));

console.log(itemNames.value); // 输出 ['a', 'b', 'c']

在这个例子中，itemNames 是一个计算属性，它的值是基于 items 数组中每个元素的第一个字符生成的。

三、对象形式的计算属性

Vue3 还支持使用对象形式来定义计算属性，这种方式特别适合于创建多个相关联的计算属性。

import { reactive, computed } from 'vue';

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

const fullName = computed(() => `${state.firstName} ${state.lastName}`);

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

在这个例子中，fullName 是一个基于 firstName 和 lastName 计算得出的属性。

四、总结

计算属性是 Vue3 Composition API 中非常强大的一个特性，它使得我们可以更容易地处理复杂逻辑，并且这些逻辑会自动根据依赖项的变化而更新。通过使用 get 和 set 方法，我们可以定义更灵活的计算属性，甚至可以动态地设置它们的依赖项。对象形式的计算属性则提供了一种组织多个相关计算属性的方式。

希望本文能帮助你更好地理解和使用 Vue3 中的计算属性，从而提升你的开发技能。如果你有任何问题或需要进一步的资源，欢迎在评论区留言讨论。