Vue3计算属性get与set方法的实战应用与技巧

1. 计算属性get与set：不只是“计算”，更是“控制”

如果你用过Vue3，肯定对计算属性不陌生。它就像一个聪明的助手，帮你把一些依赖其他数据的、需要“算一下”才能得到的结果缓存起来，避免重复计算。很多教程讲到这就停了，告诉你用 computed 加个函数就行。但说实话，这只是计算属性一半的威力。另一半，就藏在那个常常被忽略的 get 和 set 方法里。

我刚开始用Vue的时候，也以为计算属性就是个“只读”的衍生数据，想改数据？直接去改源数据呗。直到在项目里踩了几个坑才发现，事情没那么简单。比如，我有一个表单，显示的是用户的全名（由姓和名拼接而成），但用户要求能直接在这个全名输入框里修改，并且自动拆分开更新到姓和名两个字段里。这时候，如果只用简单的计算属性，你就卡住了。因为你无法通过修改计算属性来反向影响源数据。

这就是 get 和 set 这对组合拳登场的时候了。get 方法负责“读”：它定义了这个计算属性如何根据依赖的响应式数据计算得出最终值。set 方法负责“写”：当你尝试给这个计算属性赋值时，set 方法会被调用，你可以在这里定义赋值行为，通常是去更新它依赖的那些源数据。这样一来，计算属性就从一个被动的“计算结果展示器”，变成了一个双向的“数据流控制器”。它不仅能基于源数据变化而更新，还能作为用户操作的入口，智能地更新背后的源数据，让数据流更加清晰和可控。

理解这一点，是你从“会用Vue”到“能用好Vue”进行状态管理的关键一步。它尤其适合处理那些数据之间存在派生或聚合关系，但又需要双向同步的场景。接下来，我们就抛开理论，直接看代码，看看在实际项目中怎么把它们玩出花来。

2. 基础入门：从简写到完整对象，理解其运作机制

让我们先看看最基础的用法，搞清楚语法和核心概念。在Vue3的 setup 语法糖里，我们通常这样声明一个计算属性：

import { computed, ref } from 'vue';

const firstName = ref('张');
const lastName = ref('三');

// 最常见的简写形式：只提供getter
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

这里的 fullName 就是一个只有 get 方法的计算属性。computed 函数接收一个getter函数，返回一个只读的响应式引用。你访问 fullName.value 时，就会执行这个getter函数。如果你尝试 fullName.value = '李四'，Vue会抛出一个警告，告诉你这是一个只读属性。

那么，如何让它可写呢？这就需要传入一个配置对象，里面明确包含 get 和 set 函数：

import { computed, ref } from 'vue';

const firstName = ref('张');
const lastName = re