vue3的 computed

### Vue3 中 `computed` 属性的使用方法

在 Vue 3 组合式 API 中，`computed` 函数用于创建计算属性。此函数接收一个 getter 函数并返回一个只读的响应式 ref 对象[^2]。

对于简单的场景，仅需定义一个 getter 即可实现只读的计算属性：

import { computed, reactive } from 'vue';

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

// 只读计算属性
const fullName = computed(() => {
    return `${state.firstName} ${state.lastName}`;
});

为了支持写入操作，可以向 `computed` 提供第二个参数——setter 函数，从而允许修改计算属性的结果值。这使得某些情况下可以直接更新依赖的数据源。

// 可写的计算属性
const fullNameWritable = computed({
    get() {
        return `${state.firstName} ${state.lastName}`;
    },
    set(newValue) {
        const names = newValue.split(' ');
        state.firstName = names[0];
        state.lastName = names[1];
    }
});

值得注意的是，计算属性具有惰性求值特性；即只有在其所依赖的数据发生改变时才会重新评估其值，在其他时候会优先使用缓存中的旧值以提高性能效率[^3]。