用 computed 实现财务公式需分层拆解、Decimal.js 精度控制、watchEffect 处理异步依赖，并通过命名 getter 和日志保障可追溯性。
用 computed 实现复杂财务公式汇总，关键不在“写得多”，而在“分得清、算得准、稳得住”。Vue 的计算属性天然适合财务场景——依赖自动追踪、结果缓存、无副作用，但必须配合结构化拆解和精度控制，否则看似跑通，实则埋雷。
分层声明：把大公式拆成可读、可测、可复用的小单元
不要在一个 computed 里堆满嵌套运算。比如含税价 + 折扣 + 返佣 + 分摊的最终应付额，应按语义逐层定义：
-
基础项：来自 reactive 数据或 props，如
baseAmount（不含税金额）、taxRate（税率）、discountPercent（折扣率） -
中间变量：各自独立声明为 computed，例如：
taxAmount = computed(() => baseAmount.value * taxRate.value)discountedAmount = computed(() => baseAmount.value * (1 - discountPercent.value / 100)) -
最终结果：组合中间项，逻辑一目了然：
finalPayable = computed(() => discountedAmount.value * (1 + taxRate.value))
精度兜底：所有金额运算必须用 Decimal.js
JavaScript 原生 number 类型无法保证 0.1 + 0.2 === 0.3，财务系统绝不允许这种误差。toFixed(2) 只是字符串截断，不解决计算过程中的精度丢失。
- 安装：
npm install decimal.js - 所有参与运算的值都转为 Decimal 实例：
new Decimal('199.99').mul(new Decimal('1.13')).toString() - computed 中直接返回 Decimal 实例，模板中再调用
.toString()或自定义格式化函数输出
异步依赖处理：用 watchEffect 替代强行塞进 computed
税率、汇率、审批状态等常需后端接口获取，computed 本身不能 await。硬塞会导致 NaN 或卡死。
- 用 ref 存储异步结果，初始设为
null或undefined，例如：const exchangeRate = ref(null) - 用 computed 判断就绪状态：
isReady = computed(() => exchangeRate.value != null) - 在
watchEffect中监听输入变化 + 异步数据就绪，手动触发重新计算并更新结果 ref
调试与交付：加命名 getter + 简单日志，不藏逻辑
财务逻辑上线前必须可追溯、可验证。
- 给关键 computed 显式命名 getter，方便 Vue Devtools 识别：
finalPayable: { get() { console.log('recomputing finalPayable'); return ... } } - 避免在 computed 内部发请求、改 DOM、调用 alert —— 它只负责“算”，不负责“做”
- 模板中直接绑定，如
{{ finalPayable.toString() }}，无需额外方法调用
