我在开发一个电商后台管理系统时，遇到过这样一个让人抓狂的问题：明明两个计算属性都定义得好好的，逻辑也清晰得很，但其中一个调用另一个时，页面直接白屏，控制台还抛出一堆莫名其妙的错误。今天就把这个坑彻底讲清楚，顺便把 Vue 3 响应式系统的底层逻辑掰开揉碎地说一说。
现象：看似简单的调用，实则暗藏杀机
先来看一个典型的错误示例，很多开发者一开始都会写出这样的代码：
import { ref, computed } from 'vue'
export default {
setup() {
const price = ref(100)
const quantity = ref(5)
// 第一个计算属性：计算总价
const totalPrice = computed(() => {
return price.value * quantity.value
})
// 第二个计算属性：尝试调用第一个
const discountPrice = computed(() => {
// 错误写法1：直接当普通变量用
return totalPrice - 10 // 这里totalPrice是一个对象，不是数值！
})
// 错误写法2：在模板中这样用虽然在模板里可以，但在setup内部会出问题
return {
totalPrice,
discountPrice
}
}
}
运行这段代码，你会发现 discountPrice 的结果完全不对。更糟糕的是，如果你在某些条件下动态依赖 totalPrice，可能会触发响应式系统的脏检查循环，导致浏览器卡死或者控制台报错 Maximum recursive updates exceeded。
根因分析：computed 的本质是什么？
要理解这个问题，首先得搞清楚 Vue 3 中 computed 到底是什么。
computed 返回的是一个 computed ref 对象，它不是一个普通的值。这个对象有以下几个关键特性：
- 它是响应式的：当它的依赖项（比如上面的
price和quantity）发生变化时，它会重新计算 - 它有缓存：只有依赖项变化时才会重新执行计算函数，否则返回缓存的结果
- 它有
.value属性：要获取计算结果，必须访问.value
const totalPrice = computed(() => price.value * quantity.value)
console.log(totalPrice)
// 输出：{ __v_isReadonly: true, __v_isRef: true, _dirty: true, ... }
// 这是一个 ComputedRefImpl 实例，不是数字！
console.log(totalPrice.value)
// 输出：500（当 price=100, quantity=5 时）
很多新手（包括曾经的我）会忘记 .value，直接把 computed 结果当普通变量用，这就是 bug 的根源。
正确写法：如何在 computed 之间建立依赖关系
写法一：正确访问 .value（基础版）
import { ref, computed } from 'vue'
export default {
setup() {
const price = ref(100)
const quantity = ref(5)
const totalPrice = computed(() => {
return price.value * quantity.value
})
const discountPrice = computed(() => {
// 正确：访问 .value 获取计算结果
const total = totalPrice.value
return total > 1000 ? total - 100 : total - 10
})
return {
price,
quantity,
totalPrice,
discountPrice
}
}
}
这种写法完全正确。discountPrice 会隐式地依赖于 totalPrice 的依赖项（price 和 quantity），当这些值变化时，Vue 的响应式系统会自动追踪并更新。
写法二：提取公共逻辑（进阶版）
当计算属性之间的依赖关系比较复杂时，建议提取辅助函数：
import { ref, computed } from 'vue'
export default {
setup() {
const price = ref(100)
const quantity = ref(5)
const memberLevel = ref('gold') // 'normal', 'silver', 'gold', 'platinum'
// 提取价格计算逻辑
const calculateBasePrice = () => {
return price.value * quantity.value
}
// 提取折扣逻辑
const getDiscount = (basePrice) => {
const discounts = {
normal: 0,
silver: 0.05,
gold: 0.1,
platinum: 0.15
}
return basePrice * (1 - discounts[memberLevel.value])
}
const totalPrice = computed(() => {
return calculateBasePrice()
})
const discountPrice = computed(() => {
return getDiscount(totalPrice.value)
})
return { totalPrice, discountPrice }
}
}
这样做的优势是：
- 逻辑清晰，易于测试
- 避免了重复计算
- 方便在单元测试中验证每个步骤
写法三：使用 watch 处理副作用（特殊场景）
有些时候，你不仅需要在计算属性之间传递数据，还需要执行一些副作用（比如发送请求、更新第三方库状态等）。这时应该用 watch：
import { ref, computed, watch } from 'vue'
export default {
setup() {
const price = ref(100)
const quantity = ref(5)
const log = ref([])
const totalPrice = computed(() => {
return price.value * quantity.value
})
// 当 totalPrice 变化时，记录日志（副作用）
watch(totalPrice, (newTotal, oldTotal) => {
log.value.push({
time: new Date().toISOString(),
from: oldTotal,
to: newTotal
})
})
return { totalPrice, log }
}
}
注意：不要在 computed 中执行副作用。Computed 应该是纯函数，只负责计算和返回结果。
常见陷阱与边界情况
陷阱一：循环依赖
const a = computed(() => b.value + 1)
const b = computed(() => a.value + 1) // 危险！这会导致无限循环
Vue 3 的响应式系统能检测到循环依赖并抛出错误，但开发时要避免这种写法。如果确实需要双向依赖，应该引入第三个状态变量作为中介。
陷阱二：在 computed 中修改响应式数据
const count = ref(0)
// 错误：在 computed 中修改其他响应式数据
const doubled = computed(() => {
count.value += 1 // 这会导致不可预测的行为！
return count.value * 2
})
Computed 应该是只读的（即使是 writable computed，也应该通过 .value 赋值，而不是在 getter 中修改状态）。
陷阱三：忘记 .value 导致的类型错误
const items = ref([1, 2, 3])
const sum = computed(() => {
return items.value.reduce((a, b) => a + b, 0)
})
// 错误：忘记 .value
const max = computed(() => {
return items.max() // TypeError: items.max is not a function
})
在 Composition API 中的最佳实践
如果你使用 <script setup> 语法，代码会更简洁：
<script setup>
import { ref, computed } from 'vue'
const price = ref(100)
const quantity = ref(5)
const discountRate = ref(0.1)
// 计算单价
const unitPrice = computed(() => price.value / quantity.value)
// 计算小计（单价 × 数量）
const subtotal = computed(() => {
return unitPrice.value * quantity.value
})
// 计算折扣金额
const discountAmount = computed(() => {
return subtotal.value * discountRate.value
})
// 计算最终价格
const finalPrice = computed(() => {
return subtotal.value - discountAmount.value
})
// 监听最终价格变化，更新购物车
import { watch } from 'vue'
watch(finalPrice, (newPrice) => {
console.log('购物车总价更新为：', newPrice)
// 这里可以调用 API 更新后端数据
})
</script>
<template>
<div>
<p>单价：{{ unitPrice }}</p>
<p>小计：{{ subtotal }}</p>
<p>折扣：{{ discountAmount }}</p>
<p class="final">最终价格：{{ finalPrice }}</p>
</div>
</template>
这种链式依赖是 Vue 响应式系统的强项。每个 computed 只关注自己的计算逻辑，Vue 会自动处理依赖追踪和更新调度。
性能优化建议
当计算属性链很长时，注意以下几点：
避免在 computed 中执行复杂计算：如果计算很昂贵，考虑使用
shallowRef或markRaw减少响应式开销使用 computed 而不是 method：在模板中，优先使用 computed。Method 每次渲染都会重新执行，而 computed 有缓存
拆分大 computed 为多个小 computed：这有助于 Vue 更精细地追踪依赖，避免不必要的重新计算
// 不好的写法：一个大 computed 做所有事
const allData = computed(() => {
const filtered = list.value.filter(...)
const sorted = filtered.sort(...)
const paginated = sorted.slice(...)
return paginated
})
// 好的写法：拆分
const filteredList = computed(() => list.value.filter(...))
const sortedList = computed(() => filteredList.value.sort(...))
const paginatedList = computed(() => sortedList.value.slice(...))
调试技巧
当你怀疑计算属性之间的依赖有问题时，可以用 watchEffect 来追踪：
import { watchEffect } from 'vue'
watchEffect(() => {
console.log('totalPrice 变化了：', totalPrice.value)
console.log('当前依赖的 price:', price.value, 'quantity:', quantity.value)
})
这会打印出每次 totalPrice 重新计算时的详细信息，帮助你理解依赖关系。
总结
在 Vue 3 的 setup 函数中，计算属性之间互相调用是完全支持且推荐的模式。关键点只有三个：
- 始终使用
.value访问 computed 的结果 - 保持 computed 的纯函数特性，不要在 getter 中修改状态
- 复杂逻辑提取为辅助函数，保持代码可读性
响应式系统的设计初衷就是让你专注于”数据是什么”，而不是”数据怎么变”。当你理解了这一点，computed 之间的依赖关系就会变得自然而然。
希望这篇文章能帮你避开那些让人头秃的 bug。如果你的项目里还有类似的响应式问题，欢迎在评论区讨论——我踩过的那些坑，希望不用再让你踩一遍。