应避免在uni-app模板中使用耗时过滤器，因其同步执行会阻塞渲染导致页面闪烁；推荐改用computed预处理或methods封装，并配合缓存、节流等优化手段。
uni-app 过滤器执行阻塞渲染，导致页面闪烁
过滤器（filters）在 Vue 2 时代被广泛使用，但 uni-app（尤其基于 Vue 2 的旧项目）中若在模板里大量调用同步、耗时的过滤器（比如格式化长文本、遍历数组、正则替换等），会直接卡住渲染线程——因为每个 {{ item | myFilter }} 都在 render 函数中实时执行，且无法异步或缓存。用户看到的就是：数据已到，但内容“卡住半秒后突然刷出来”，伴随布局抖动。
- 常见错误现象：列表页首次渲染慢、下拉刷新后文字延迟出现、时间戳
{{ time | formatTime }}在 iOS 小程序上明显滞后 - 根本原因不是“网络慢”，而是过滤器函数本身执行时间 > 16ms（即掉帧阈值），触发了强制同步重排
- Vue 3 + Composition API 项目中已移除全局过滤器，
filters选项本身不复存在；若你还在用，说明项目未升级或混用了 Vue 2 兼容层 - 不要试图在
filters里加setTimeout或Promise—— 模板语法不支持异步过滤器，会直接报错或返回undefined
用 computed 或 method 替代 filters，控制执行时机
把过滤逻辑从模板层抽离到响应式计算或显式方法中，就能避开 render 阶段的不可控执行，也便于加缓存和节流。
- 对简单、高频字段（如状态码转中文），用
computed预算好：computed: { formattedList() { return this.rawList.map(item => ({ ...item, statusText: STATUS_MAP[item.status] })) } } - 对需参数的动态处理（如带 locale 的日期格式化），封装为
methods并配合v-memo（Vue 3）或Object.freeze（Vue 2）避免重复计算 - 绝对不要在
v-for内部写{{ item | expensiveFilter(arg) }}；改成先 map 处理好再遍历：v-for="item in processedList" - 若必须保留过滤器接口兼容性，可改写为
export const myFilter = memoize((val, arg) => {...})，但注意memoize不能解决首次阻塞，只防重复调用
图片/文本类“视觉闪烁”别误判为过滤器问题
很多开发者以为 {{ url | cdnUrl }} 导致加载慢，其实真正拖慢首屏的是图片资源本身没占位、没懒加载，或 CDN 域名未预连。过滤器在这里只是字符串拼接（return 'https://cdn.com/' + url），耗时微乎其微。
- 检查是否混淆了“渲染闪烁”和“资源加载闪烁”：前者是文字/结构跳变，后者是图片闪现空白再填充
-
cdnUrl类过滤器应确保返回的是合法 URL 字符串，避免因拼错路径导致<image></image>触发@error，进而引发 fallback 逻辑重绘 - 更推荐用计算属性或
setup()中的ref直接生成最终 URL，而非模板中调用——减少运行时解析开销
Vue 2 项目升级过滤器的最小改动方案
如果你无法立刻升级 Vue 3，又想快速止血，可以停用全局 filters，改用组件内定义的 methods + v-text 绑定，绕过模板编译阶段的 filter 查找开销。
- 删掉
Vue.filter('xxx', ...)全局注册 - 在组件
methods里写同名函数：formatPrice(val) { return '¥' + Number(val).toFixed(2) } - 模板中改用：
<span v-text="formatPrice(item.price)"></span>（比{{ item.price | formatPrice }}少一次 filter 查表） - 关键点：
v-text是指令，绑定值走的是响应式更新队列，而{{}}插值在 render 时强制求值，前者更可控
真正卡顿的从来不是“怎么写过滤器”，而是没意识到它被调用了几百次且每次都在主线程同步跑。把逻辑提到 data 初始化或 computed 里，比优化单个函数体重要十倍。
