购物车总价必须用 computed 而非过滤器计算，因为过滤器不响应数组内部属性变化，无法监听 item.num 或 item.price 的变更；computed 可自动追踪依赖并实时更新，配合过滤器仅作格式化显示。
过滤器不能直接用于动态计算总价
uni-app 的 v-for 模板中支持过滤器（如 {{ price | toFixed }}），但过滤器本质是纯函数，**不响应数据变化、无法监听数组增删或数量变更**。购物车总价必须依赖响应式机制，靠过滤器算不出来——你改了 item.num，{{ cartItems | totalPrice }} 不会自动重算。
用 computed 替代过滤器做实时总价计算
真正可靠的做法是把总价逻辑写在 computed 里，它会自动追踪 cartItems 及其内部属性（如 num、price）的变化：
- 确保购物车数据是响应式的（比如定义在
data()或ref/reactive中） -
computed内部用reduce或forEach累加，避免手动维护中间变量 - 别在
computed里调用异步操作或修改 state，否则触发警告
示例：
computed: {
totalPrice() {
return this.cartItems.reduce((sum, item) => {
return sum + item.price * item.num
}, 0)
}
}
模板中直接用 {{ totalPrice }}，只要 cartItems 里的任意 item.num 或 item.price 改变，它就立刻更新。
为什么不能把 totalPrice 写成全局过滤器
即使你注册了全局过滤器 Vue.filter('totalPrice', ...)，它也只接收一个参数（比如整个 cartItems 数组），但：
- 过滤器无法感知数组内对象属性的变更（Vue 2/3 均不支持深层响应式监听）
- cartItems 是引用类型，过滤器只监听数组本身是否被重新赋值，不监听 item.num++ 这种内部修改
- 在 Vue 3 的 Composition API 项目中，过滤器已被移除，setup() 里根本没法用
所以硬套过滤器只会导致界面卡在旧值，调试时发现 console.log 有输出但页面不动，大概率是掉进这个坑了。
需要格式化显示时，再用过滤器配合 computed
总价计算交给 computed，格式化（比如保留两位小数、加 ¥ 符号）才用过滤器，两者分工明确：
- 定义过滤器：在
main.js或filters/index.js里注册Vue.filter('toFixed', (n) => Number(n).toFixed(2)) - 模板中组合使用：
¥{{ totalPrice | toFixed }} - 这样既保证计算实时性，又复用格式化逻辑，还不污染业务逻辑
注意：如果 totalPrice 返回 NaN（比如某 item 缺少 price 或 num），过滤器会报错，建议在 computed 里做兜底，比如 return isNaN(sum) ? 0 : sum。
过滤器只负责“怎么显示”，不负责“怎么算”；购物车总价这种强依赖状态联动的逻辑，必须交由响应式系统接管，绕不开 computed。
