Vue3 计算属性 computed

Vue3计算属性(computed)不仅限于模板使用，其本质是返回响应式ref对象，可通过.value访问值。计算属性适用于：1)脚本逻辑处理；2)属性间互相依赖；3)通过getter/setter实现可写状态。开发者可以灵活地在组件逻辑、外部函数等多种场景下访问计算属性，突破模板限制。计算属性的设计旨在封装响应式依赖，同时保持高度灵活性。

qq_30193097

300人浏览 · 2025-11-18 11:21:30

qq_30193097 · 2025-11-18 11:21:30 发布

Vue3 的计算属性（computed）并非只能在模板中使用，其返回值可以在组件逻辑、其他计算属性或外部函数中自由访问。以下是具体说明：

一、计算属性的本质与使用场景

本质

computed 返回的是一个响应式的 ref 对象，可通过 .value 访问值。例如：

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
console.log(fullName.value); // 直接访问计算结果

适用场景
- 模板外的逻辑处理：在脚本部分监听计算属性的变化，或作为其他函数的参数。
- 依赖其他计算属性：多个计算属性之间可以互相依赖。

二、可写计算属性的场景

若需在非模板中修改计算属性的值，需通过 getter/setter 定义可写状态：

const count = ref(0);
const doubleCount = computed({
  get() { return count.value * 2; },
  set(newVal) { count.value = newVal / 2; }
});

// 在逻辑中修改
doubleCount.value = 6; // 触发 setter，count 更新为 3

总之，计算属性的设计初衷是封装响应式依赖关系，但其使用范围不仅限于模板。开发者可根据业务需求灵活选择访问方式。