computed 中不能直接调用 Vue 过滤器，因其仅限模板层通过 | 使用；应将过滤逻辑抽为普通函数，在 computed 和模板中分别调用，以保障响应式、类型安全与多端兼容性。
computed 里不能直接调用 Vue 过滤器
Vue 2 和 Vue 3（包括 uni-app）的 filters 是模板层专用机制，只在模板中通过 | 管道符生效，computed 函数内部是纯 JavaScript 执行环境，this.$options.filters 在 setup 语法糖中不可访问，Options API 中虽存在但不推荐手动调用——它绕过响应式追踪、无类型提示、且容易因 this 绑定出错。
想复用过滤器逻辑？把它抽成普通函数
把原本写在 filters 里的处理逻辑（比如价格保留两位小数、日期格式化）单独导出为可 import 的函数，然后在 computed 里直接调用：
-
filters/formatPrice.js写成：export const formatPrice = (num) => Number(num).toFixed(2)
- 在
setup()或computed中：import { formatPrice } from '@/filters/formatPrice.js'<br>const displayedPrice = computed(() => formatPrice(item.price)) - 模板里仍可用
{{ item.price | formatPrice }}（保持一致性），而computed里走函数调用，逻辑复用、类型安全、调试友好
为什么别在 computed 里手动模拟 filter 行为
比如这样写是危险的：
computed: {<br> formattedList() {<br> return this.list.map(item => ({ ...item, price: this.$options.filters?.toFixed?.(item.price) }))<br> }<br>}
问题包括：
-
this.$options.filters在 Vue 3 + Composition API 项目中为undefined - filter 函数通常没做空值防护，
item.price为null或undefined时直接报错 - 无法被 TypeScript 推导类型，IDE 不提示参数、无自动补全
- 一旦 filter 内部依赖响应式数据（比如 locale 配置），它就不再“纯”，破坏
computed缓存前提
多端兼容时特别注意正则和字符串方法
如果你的过滤器含正则（如中文模糊匹配），别在 computed 里用 new RegExp(keyword) —— 用户输 [ 或 ( 就崩。正确做法是：
- 用
String.prototype.includes()替代RegExp.test()（简单场景） - 需要高亮或复杂匹配时，用
keyword.replace(/[-[]{}()*+?.,\^$|#s]/g, '\$&')先转义再构造正则 - 所有字符串操作加可选链：
item.name?.toLowerCase()?.includes(keyword.toLowerCase())，防null/undefined - iOS 微信小程序 WebView 对
String.prototype.normalize()支持不稳定，慎用于去重/拼音匹配
真正难的不是写对一次，而是确保每次 searchText 变化时，整个 filteredList 计算既不出错、也不卡顿——这要求你从源头控制数据结构、提前做类型断言、并接受「computed 不是万能胶水」这个事实。
