Vue计算属性天然支持多重响应式依赖，自动追踪更新；非响应式数据（如Date.now()）不会触发更新；复杂逻辑应分层拆解为多个计算属性；需副作用或动态依赖时宜用watchEffect。
Vue 计算属性天然支持多重依赖，只要这些依赖都是响应式数据（如 ref、reactive 中的属性），它就能自动追踪并更新。关键不在于“能不能”，而在于“怎么组织才清晰、稳定、可维护”。
依赖必须是响应式数据，否则不会触发更新
计算属性只对响应式依赖建立追踪关系。常见陷阱包括：
- 直接读取普通 JS 对象或数组的属性（未用
reactive或ref包裹） - 调用非响应式函数或访问
Date.now()、Math.random()等无状态值 - 从第三方库中读取的状态未通过
toRef或computed显式桥接
例如：computed(() => obj.name + Date.now()) 中，Date.now() 不是响应式依赖，所以整个计算属性永远不会因时间变化而更新——它只在 obj.name 改变时重新执行。
多个响应式源可自然共存，无需额外声明
一个计算属性可以同时依赖多个 ref 或 reactive 属性，Vue 会自动收集全部依赖。比如：
立即学习“前端免费学习笔记（深入）”；
const totalPrice = computed(() =><br> cart.value.reduce((sum, item) => sum + item.price * item.count, 0) +<br> shippingFee.value -<br> (coupon.value?.discount || 0)<br>)
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
这里同时依赖了 cart（ref 数组）、shippingFee（ref 数字）、coupon（ref 对象），任意一个变化都会触发 totalPrice 重新计算。
复杂逻辑建议拆分为多个计算属性
当一个计算属性内部条件多、分支深、依赖杂，容易掩盖真实依赖路径，也难以复用和测试。推荐分层设计：
- 底层：专注单一职责，例如
isValid、filteredItems、hasSearchTerm - 中层：组合底层结果，例如
displayList = computed(() => hasSearchTerm.value ? filteredItems.value : allItems) - 顶层：面向视图，例如
statusMessage = computed(() => isValid.value ? 'Ready' : 'Check inputs')
这样每个计算属性依赖明确、粒度可控，Vue 的缓存机制也能更精准生效——比如 filteredItems 不变时，依赖它的所有上层计算属性都跳过重算。
需要副作用或动态依赖？考虑 watchEffect
计算属性要求 getter 必须是纯函数（无副作用、无异步、无 DOM 操作）。如果遇到以下情况，watchEffect 更合适：
- 依赖来自非响应式来源（如 localStorage、URL 参数、事件总线）
- 需要根据条件动态读取不同字段（如
obj[activeKey.value]） - 计算后要发起请求、更新 DOM、或清理定时器
它同样自动收集依赖，但允许你写命令式逻辑，并提供清理函数支持。
