Vue计算属性详解：从基础用法到实战避坑，解锁响应式高效开发
在Vue响应式开发中，我们经常需要根据已有响应式数据，派生出新的状态——比如根据用户输入过滤列表、根据多个变量拼接名称、根据状态切换显示内容等。如果直接在模板中编写复杂逻辑，会让模板臃肿杂乱、难以维护；如果重复编写相同逻辑，又会导致代码冗余、性能损耗。Vue提供的computed（计算属性），正是为解决这些问题而生，它让响应式逻辑的编写更简洁、高效、可维护。今天就从基础用法、核心特性、实战场景到避坑指南，全方位拆解Vue计算属性，帮你彻底掌握这个高频开发工具。
为什么需要计算属性？模板逻辑的“减负神器”
在Vue模板中，我们可以直接编写简单的表达式，比如拼接字符串、判断布尔值、简单运算等，这能满足基础的展示需求。但当逻辑变得复杂时，模板表达式的弊端就会凸显出来。
痛点示例：臃肿的模板逻辑
假设我们有一个用户信息组件，需要根据用户的姓名、性别、年龄，动态显示一段描述文本，同时判断用户是否为成年，还要拼接用户的完整身份信息。如果直接在模板中编写逻辑，代码会是这样：
<script setup>
import { ref } from 'vue';
// 响应式用户数据
const user = ref({
firstName: '张',
lastName: '三',
gender: '男',
age: 22
});
</script>
<template>
<div class="user-info">
<!-- 模板中嵌套复杂逻辑，可读性差、难以维护 -->
<p>用户描述：{{ user.firstName + user.lastName }}，{{ user.gender === '男' ? '先生' : '女士' }}，{{ user.age >= 18 ? '已成年' : '未成年' }}</p>
<p>完整身份：{{ user.gender === '男' ? 'Mr.' : 'Ms.' }} {{ user.firstName + user.lastName }} ({{ user.age }}岁)</p>
</div>
</template>
这段代码虽然能实现需求，但存在两个明显问题：一是模板逻辑过于复杂，可读性差，后续修改时需要反复梳理表达式；二是存在重复逻辑（比如拼接姓名、判断性别），如果多处需要使用，会导致代码冗余，且修改时需要多处同步修改，容易出错。
解决方案：用计算属性简化逻辑
计算属性的核心作用，就是将复杂的派生逻辑抽离出来，单独定义，让模板只负责展示，逻辑负责计算。上面的示例，用计算属性重构后，代码会变得简洁清晰：
<script setup>
import { ref, computed } from 'vue';
const user = ref({
firstName: '张',
lastName: '三',
gender: '男',
age: 22
});
// 计算属性：拼接完整姓名
const fullName = computed(() => {
return user.value.firstName + user.value.lastName;
});
// 计算属性：判断用户称谓
const honorific = computed(() => {
return user.value.gender === '男' ? '先生' : '女士';
});
// 计算属性：判断是否成年
const isAdult = computed(() => {
return user.value.age >= 18;
});
// 计算属性：完整用户描述
const userDesc = computed(() => {
return `${fullName.value}，${honorific.value}，${isAdult.value ? '已成年' : '未成年'}`;
});
// 计算属性：完整身份信息
const userIdentity = computed(() => {
const title = user.value.gender === '男' ? 'Mr.' : 'Ms.';
return `${title} ${fullName.value} (${user.value.age}岁)`;
});
</script>
<template>
<div class="user-info">
<!-- 模板只负责展示，逻辑清晰易懂 -->
<p>用户描述：{{ userDesc }}</p>
<p>完整身份：{{ userIdentity }}</p>
</div>
</template>
重构后的代码，将所有派生逻辑抽离为独立的计算属性，模板变得简洁干净，且每个计算属性职责单一，后续修改时只需修改对应计算属性，无需改动模板，可维护性大幅提升。这就是计算属性的核心价值：分离逻辑与展示，简化模板，减少冗余。
计算属性基础用法：从定义到使用
Vue3中，计算属性通过computed()函数定义，该函数接收一个getter函数（核心逻辑），返回一个计算属性ref。和普通ref一样，我们可以通过.value访问其值，在模板中会自动解包，无需手动添加.value。
1. 基础定义：只读计算属性
最常用的计算属性是“只读”的，即只定义getter函数，用于根据依赖的响应式数据派生新值。其基本语法如下：
<script setup>
import { ref, computed } from 'vue';
// 源响应式数据
const num1 = ref(10);
const num2 = ref(20);
// 计算属性：派生新值（只读）
const sum = computed(() => {
// getter函数：逻辑计算，返回派生值
return num1.value + num2.value;
});
</script>
<template>
<div>
<p>num1: {{ num1 }}</p>
<p>num2: {{ num2 }}</p>
<p>两数之和：{{ sum }}</p> <!-- 模板中自动解包，无需.sum.value -->
</div>
</template>
关键点说明：
- 计算属性会自动追踪其依赖的响应式数据（如上例中的num1、num2），当依赖发生变化时，计算属性会自动重新计算；
- 计算属性的值会被缓存，只要依赖没有变化，多次访问计算属性，都会直接返回缓存的结果，不会重复执行getter函数；
- 只读计算属性不能直接修改，若尝试修改（如
sum.value = 50），会触发运行时警告。
2. 实战场景1：列表过滤（结合v-for）
在列表渲染中，过滤功能是高频需求，结合计算属性使用，能让过滤逻辑更清晰，且无需手动触发过滤方法。比如我们有一个商品列表，需要根据搜索关键词过滤商品：
<script setup>
import { ref, computed } from 'vue';
// 源响应式数据：商品列表、搜索关键词
const goods = ref([
{ id: 1, name: 'Vue实战教程', price: 99 },
{ id: 2, name: 'JavaScript进阶指南', price: 89 },
{ id: 3, name: '前端面试题库', price: 69 },
{ id: 4, name: 'Vue3组件封装实战', price: 129 }
]);
const searchKey = ref('');
// 计算属性：过滤商品列表
const filteredGoods = computed(() => {
// 转换为小写，实现不区分大小写过滤
const key = searchKey.value.toLowerCase();
// 根据关键词过滤商品
return goods.value.filter(good => {
return good.name.toLowerCase().includes(key);
});
});
</script>
<template>
<div class="goods-list">
<input
type="text"
v-model="searchKey"
placeholder="请输入商品名称搜索"
/>
<ul>
<!-- 渲染过滤后的列表 -->
<li v-for="good in filteredGoods" :key="good.id" class="goods-item">
商品名称：{{ good.name }} | 价格：¥{{ good.price }}
</li>
</ul>
</div>
</template>
<style>
.goods-list {
margin: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 4px;
}
.goods-item {
margin: 8px 0;
list-style: none;
padding: 6px;
background: #f8f9fa;
}
input {
padding: 6px;
width: 300px;
margin-bottom: 10px;
}
</style>
这个示例中，搜索关键词searchKey变化时，filteredGoods会自动重新计算，过滤出包含关键词的商品，无需手动调用过滤方法，实现了“数据驱动视图”的响应式效果。
3. 实战场景2：多依赖派生状态
计算属性可以依赖多个响应式数据，甚至可以依赖其他计算属性，实现更复杂的派生逻辑。比如一个购物车组件，需要根据商品数量和单价，计算商品小计、购物车总价，还要判断是否满足满减条件：
<script setup>
import { ref, computed } from 'vue';
// 源响应式数据：商品信息、数量
const product = ref({
name: 'Vue实战教程',
price: 99,
discount: 0.9 // 折扣
});
const quantity = ref(2);
const fullReduction = ref(200); // 满200减50
// 计算属性：商品小计（单价×数量×折扣）
const subTotal = computed(() => {
return (product.value.price * quantity.value * product.value.discount).toFixed(2);
});
// 计算属性：购物车总价（此处简化为单个商品小计）
const totalPrice = computed(() => {
return parseFloat(subTotal.value); // 依赖其他计算属性
});
// 计算属性：是否满足满减条件
const isFullReduction = computed(() => {
return totalPrice.value >= fullReduction.value; // 依赖其他计算属性
});
// 计算属性：最终支付金额
const finalPrice = computed(() => {
return isFullReduction.value ? (totalPrice.value - 50).toFixed(2) : totalPrice.value.toFixed(2);
});
</script>
<template>
<div class="cart-item">
<h3>{{ product.name }}</h3>
<p>单价：¥{{ product.price }}（{{ product.discount * 10 }}折）</p>
<p>数量：<button @click="quantity--" :disabled="quantity <= 1">-</button> {{ quantity }} <button @click="quantity++">+</button></p>
<p>小计：¥{{ subTotal }}</p>
<p>总价：¥{{ totalPrice }}</p>
<p v-if="isFullReduction" style="color: #e53e3e;">满足满{{ fullReduction }}减50！</p>
<p>最终支付：¥{{ finalPrice }}</p>
</div>
</template>
这个示例中，finalPrice依赖isFullReduction，isFullReduction依赖totalPrice，totalPrice依赖subTotal，形成了依赖链。只要其中任何一个源数据（如quantity、product.price）发生变化，所有相关的计算属性都会自动重新计算，且每个计算属性都会缓存自己的结果，避免重复计算。
核心特性：计算属性缓存 vs 方法
很多初学者会有一个疑问：既然计算属性能实现的逻辑，用方法也能实现，为什么还要用计算属性？比如上面的求和逻辑，用方法编写如下：
<script setup>
import { ref } from 'vue';
const num1 = ref(10);
const num2 = ref(20);
// 方法：计算两数之和
function getSum() {
return num1.value + num2.value;
}
</script>
<template>
<p>两数之和：{{ getSum() }}</p>
</template>
从表面上看，计算属性和方法的效果完全一致，但二者的核心区别在于缓存机制，这也是计算属性的性能优势所在。
1. 计算属性缓存：依赖不变，结果不变
计算属性会缓存其计算结果，只有当它依赖的响应式数据发生变化时，才会重新执行getter函数，重新计算结果。如果依赖没有变化，无论多少次访问计算属性，都会直接返回缓存的结果，不会重复执行逻辑。
举个例子，假设我们有一个耗时的计算逻辑（比如循环一个巨大的数组）：
<script setup>
import { ref, computed } from 'vue';
const list = ref(new Array(100000).fill(1)); // 模拟巨大数组
// 计算属性：耗时计算（求和）
const listSum = computed(() => {
console.log('计算属性重新计算'); // 仅在list变化时打印
return list.value.reduce((total, item) => total + item, 0);
});
// 方法：耗时计算（求和）
function getListSum() {
console.log('方法重新执行'); // 每次调用都会打印
return list.value.reduce((total, item) => total + item, 0);
}
</script>
<template>
<!-- 多次访问计算属性，仅第一次（或list变化时）执行逻辑 -->
<p>计算属性求和：{{ listSum }}</p>
<p>计算属性求和：{{ listSum }}</p>
<p>计算属性求和：{{ listSum }}</p>
<!-- 多次调用方法，每次都执行逻辑 -->
<p>方法求和：{{ getListSum() }}</p>
<p>方法求和：{{ getListSum() }}</p>
<p>方法求和：{{ getListSum() }}</p>
</template>
运行这段代码会发现：计算属性的console.log只打印一次（或list变化时打印），而方法的console.log会打印三次。这就是缓存的作用——避免重复执行耗时逻辑，提升页面性能。
2. 方法：无缓存，每次调用都执行
方法没有缓存机制，每次调用方法，都会重新执行方法内部的逻辑。即使方法依赖的响应式数据没有变化，只要调用方法，就会重复计算。
3. 如何选择：计算属性 vs 方法
根据二者的特性，我们可以明确选择场景：
- 使用计算属性：当逻辑依赖响应式数据，且需要多次访问结果，且逻辑耗时（如过滤、排序、复杂运算）时，优先使用计算属性，利用缓存提升性能；
- 使用方法：当逻辑不依赖响应式数据（如生成随机数、格式化时间），或需要每次调用都重新执行逻辑（如点击按钮触发的计算）时，使用方法。
注意：如果计算属性的逻辑非常简单（如简单的加减乘除），缓存的性能优势不明显，此时使用计算属性或方法均可，主要看代码可读性。
进阶用法：可写计算属性
默认情况下，计算属性是只读的，只能通过修改其依赖的响应式数据来改变计算结果，不能直接修改计算属性的值。但在某些特殊场景中，我们需要“反向修改”计算属性，进而修改其依赖的源数据，这时就可以使用“可写计算属性”——通过同时提供getter和setter函数来实现。
1. 可写计算属性的定义
可写计算属性的语法的是，给computed()函数传递一个对象，该对象包含get（ getter函数，用于计算派生值）和set（setter函数，用于反向修改源数据）两个方法：
<script setup>
import { ref, computed } from 'vue';
// 源响应式数据： firstName 和 lastName
const firstName = ref('张');
const lastName = ref('三');
// 可写计算属性：fullName
const fullName = computed({
// getter：根据firstName和lastName，计算完整姓名
get() {
return firstName.value + lastName.value;
},
// setter：修改fullName时，反向修改firstName和lastName
set(newValue) {
// 假设 newValue 是 "李四"，拆分出 firstName 和 lastName
const [newFirst, newLast] = newValue.split('');
firstName.value = newFirst;
lastName.value = newLast;
}
});
</script>
<template>
<div>
<p>完整姓名：{{ fullName }}</p>
<button @click="fullName = '李四'">修改为李四</button>
<p> firstName：{{ firstName }} | lastName：{{ lastName }}</p>
</div>
</template>
运行这段代码，点击按钮后，fullName被修改为“李四”，setter函数会被触发，将“李四”拆分为firstName（李）和lastName（四），进而修改源数据。此时，getter函数会重新计算，fullName的值也会同步更新。
2. 实战场景：表单双向绑定
可写计算属性常用于表单双向绑定场景，比如将一个输入框的值，同步到多个响应式数据中。例如，一个地址输入框，输入“省-市-区”格式的地址，自动拆分到province、city、district三个变量中：
<script setup>
import { ref, computed } from 'vue';
// 源响应式数据：省、市、区
const province = ref('');
const city = ref('');
const district = ref('');
// 可写计算属性：完整地址
const fullAddress = computed({
get() {
// 拼接完整地址
return [province.value, city.value, district.value].filter(Boolean).join('-');
},
set(newValue) {
// 拆分地址，反向修改源数据
const [prov, cit, dist] = newValue.split('-');
province.value = prov || '';
city.value = cit || '';
district.value = dist || '';
}
});
</script>
<template>
<div class="address-form">
<input
type="text"
v-model="fullAddress"
placeholder="请输入地址（格式：省-市-区）"
/>
</div>
<div class="address-detail">
<p>省：{{ province }}</p>
<p>市：{{ city }}</p>
<p>区：{{ district }}</p>
</div>
</template>
<style>
.address-form {
margin: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 4px;
}
.address-detail {
margin-top: 10px;
padding: 10px;
background: #f8f9fa;
}
input {
padding: 6px;
width: 300px;
}
</style>
这个示例中，输入“北京市-海淀区-中关村”后，fullAddress的setter函数会拆分地址，将省、市、区分别赋值给province、city、district；反之，修改province、city、district中的任何一个，fullAddress也会自动拼接更新，实现了双向同步。
高级特性：获取计算属性的上一个值（Vue3.4+）
Vue3.4及以上版本，支持在计算属性的getter函数中，通过第一个参数获取上一次计算的结果（previous），这在需要“保留上一个有效状态”的场景中非常实用。比如，我们需要一个计算属性，当count的值小于等于5时，返回count的值；当count大于5时，保留上一次小于等于5的值：
<script setup>
import { ref, computed } from 'vue';
const count = ref(3);
// 计算属性：保留上一个有效值
const validCount = computed((previous) => {
// previous 是上一次计算的结果（初始值为undefined）
if (count.value <= 5) {
return count.value; // 小于等于5，返回当前值
}
return previous; // 大于5，返回上一次的值
});
</script>
<template>
<div>
<p>当前count：{{ count }}</p>
<p>有效count：{{ validCount }}</p>
<button @click="count++">count+1</button>
</div>
</template>
运行这段代码：
- 初始时count=3，validCount=3；
- 点击按钮，count依次变为4、5，validCount同步变为4、5；
- count变为6时，validCount仍为5（上一次的值）；
- 继续点击，count变为7、8，validCount始终保持5。
这个特性也适用于可写计算属性，只需在getter函数中添加previous参数即可。
避坑指南：计算属性的常见错误与最佳实践
虽然计算属性用法简单，但在实际开发中，很多初学者会因为忽略其特性而踩坑。下面总结几个常见错误和最佳实践，帮你避开陷阱。
1. 错误1：getter函数有副作用
计算属性的getter函数应该只做“计算”，不应该有任何副作用——比如修改其他响应式数据、发送异步请求、操作DOM等。getter函数的职责是“根据依赖派生值”，副作用会导致代码逻辑混乱，且可能引发不可预期的问题。
<!-- 错误示例：getter函数有副作用（修改其他数据） -->
<script setup>
import { ref, computed } from 'vue';
const num = ref(10);
const doubleNum = ref(0);
// 错误：getter中修改doubleNum，产生副作用
const sum = computed(() => {
doubleNum.value = num.value * 2; // 副作用：修改了其他响应式数据
return num.value + doubleNum.value;
});
</script>
正确做法：将副作用逻辑抽离到方法中，或使用watch侦听器（后续会讲解），getter函数仅负责计算。
2. 错误2：直接修改计算属性的值
只读计算属性不能直接修改，若尝试修改，会触发运行时警告，且修改无效。即使是可写计算属性，也应该通过修改计算属性的值，间接修改其依赖的源数据，而不是直接修改依赖。
<!-- 错误示例：直接修改只读计算属性 -->
<script setup>
import { ref, computed } from 'vue';
const num1 = ref(10);
const num2 = ref(20);
const sum = computed(() => num1.value + num2.value);
// 错误：直接修改计算属性的值
function changeSum() {
sum.value = 50; // 触发警告，修改无效
}
</script>
正确做法：修改计算属性依赖的源数据（num1、num2），让计算属性自动重新计算。
3. 错误3：依赖非响应式数据
计算属性只能追踪响应式数据（ref、reactive包裹的数据）的变化，如果依赖非响应式数据（如普通变量），计算属性不会自动重新计算。
<!-- 错误示例：依赖非响应式数据 -->
<script setup>
import { computed } from 'vue';
// 非响应式变量
let num = 10;
// 计算属性依赖非响应式数据，num变化时，计算属性不会更新
const doubleNum = computed(() => num * 2);
// 错误：修改非响应式数据，计算属性不会重新计算
function changeNum() {
num = 20;
console.log(doubleNum.value); // 输出20，而非40
}
</script>
正确做法：将非响应式数据改为响应式数据（用ref或reactive包裹）。
4. 最佳实践总结
- 单一职责：每个计算属性只负责一个逻辑，避免一个计算属性包含复杂的多步逻辑，提升可读性和可维护性；
- 无副作用：getter函数仅做计算，不修改其他数据、不发送请求、不操作DOM；
- 优先缓存：对于耗时逻辑、多次访问的派生值，优先使用计算属性，利用缓存提升性能；
- 慎用可写：可写计算属性仅在需要反向修改源数据的场景使用，大部分场景使用只读计算属性即可；
- 依赖响应式：确保计算属性的依赖都是响应式数据，否则无法触发自动更新。
总结：计算属性的核心价值与应用场景
Vue计算属性是响应式开发中的“效率工具”，其核心价值在于：分离逻辑与展示、自动追踪依赖、缓存计算结果，让代码更简洁、高效、可维护。
常见应用场景：
- 列表过滤、排序：结合v-for，实现响应式过滤排序，无需手动触发；
- 多数据派生：根据多个响应式数据，生成新的状态（如拼接、运算、判断）；
- 表单双向绑定：通过可写计算属性，实现输入值与多个源数据的双向同步；
- 复杂逻辑抽离：将模板中的复杂表达式，抽离为计算属性，简化模板。
掌握计算属性的用法，能让你在Vue开发中避开很多冗余代码和性能问题，尤其是在中大型项目中，合理使用计算属性，能显著提升代码的可维护性和页面性能。下一篇，我们将讲解与计算属性互补的“侦听器（watch）”，看看它与计算属性的区别和适用场景，解锁更灵活的响应式开发技巧。
