nvue页面不支持filter,需用computed或methods替代;因nvue渲染层不走vue模板编译器,filters静默失效,应提前在data或computed中处理数据,或挂载函数到uni对象实现全局调用。

uni-app nvue 里没有 filter,得用 computed 或方法替代
nvue 页面不支持 Vue 2 的 filters 选项(Vue 3 本身也已移除),编译时直接忽略,模板里写 {{ item.name | formatName }} 会原样输出、不执行、也不报错——这是最容易被忽略的静默失效。
根本原因是 nvue 渲染层不走 Vue 的模板编译器,而是通过原生组件映射 + JSBridge 桥接,filters 这类纯运行时逻辑在原生侧无对应实现。
- 必须把过滤逻辑提前到数据准备阶段:比如请求后立刻处理字段,或在
computed中返回加工后的数组 - 不能在
list的cell里写computed——每个 cell 是独立原生实例,响应式依赖不会触发更新,反而可能引发内存泄漏 - 简单格式化(如日期、数字)建议封装成工具函数,在
render阶段直接调用,比如{{ formatDate(item.time) }}
cell 内部怎么安全做字符串处理
在 list 的 cell 模板中,可直接调用 methods 里的函数,但要注意两点:函数必须是纯函数(无副作用、不修改 this.data)、不依赖响应式状态。
常见错误是把带 this.$nextTick 或 uni.showToast 的逻辑塞进渲染函数,会导致 native 层调用失败或白屏。
- 推荐写法:
{{ truncate(item.title, 15) }},其中truncate是定义在methods中的纯函数 - 避免在函数内访问
this.listData等响应式属性,nvue 下 this 上下文与 vue 页面不同,部分属性不可见 - 正则、
String.prototype.replace、Intl.DateTimeFormat等 Web API 在 nvue 中可用,但filter数组方法本身没问题,只是不能用于模板插值链式调用
需要动态切换格式时,用 data 字段预存结果
比如一个字段要支持「全部显示 / 截断显示」两种模式,不要在模板里加三元判断再调函数,而应在数据加载后、赋值前就生成两个版本:
this.listData = res.data.map(item => ({ ...item, titleShort: item.title.slice(0, 12) + '...' }))- 模板中直接用
{{ showFull ? item.title : item.titleShort }} - 这样既规避了 nvue 对复杂表达式的支持限制,又避免每次 render 都重复计算
注意:这种预处理必须在 this.$refs.list.append() 之前完成,不能等 append 后再遍历 this.listData 改字段——list 组件只认 append 传入的数据快照。
全局格式化函数怎么注册才有效
nvue 不支持 Vue.filter 全局注册,但可以在 main.js 或 app.vue 的 onLaunch 中挂载到 uni 对象上,然后在任意 nvue 页面中通过 uni.formatDate 调用。
- 示例:
uni.formatPrice = (val) => `¥${Number(val).toFixed(2)}` - 必须在所有页面加载前注册,否则 nvue 页面初始化时找不到该函数
- 不能用箭头函数注册(会丢失
this上下文),且函数体内禁止使用this或任何页面实例属性
最易踩的坑是:以为挂到 Vue.prototype 就能用,实际上 nvue 页面根本不用 Vue 实例,prototype 上的东西完全不可见。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










