过滤器不能用于过滤数组空值——它不改变原始数据，也不支持响应式更新，强行用会导致视图不刷新、逻辑错乱。
过滤器不能用于过滤数组空值——它不改变原始数据，也不支持响应式更新，强行用会导致视图不刷新、逻辑错乱。
为什么 filter 过滤器在模板里写 {{ list | removeEmpty }} 不生效
uni-app 的过滤器（filters）本质是纯函数，只接收输入、返回输出，不会修改原数组，也不触发 Vue 的响应式更新机制。即使你写了正确的过滤逻辑，比如：
Vue.filter('removeEmpty', list => list.filter(item => item))
它也只在插值渲染那一刻“算一次”，后续 list 推入新元素、某项变为空值，{{ list | removeEmpty }} 不会重新执行——因为 Vue 不监听数组内部变化对过滤器的影响。
常见错误现象：
- 初始渲染正常，但 push 一个
null后，视图没更新 - v-for 绑定
{{ list | removeEmpty }}，结果仍遍历到空项 - H5 正常，小程序白屏或报
filter is not a function（部分平台不支持自定义 filters）
真正该用 computed 而不是过滤器
要让“过滤后数组”实时响应变化，必须用 computed：它能追踪 list 及其每一项的变更（包括 item === null、item === ''、item === undefined）。
推荐写法：
computed: {
filteredList() {
return this.list.filter(item =>
item != null &&
item !== '' &&
item !== 'null' &&
item !== 'undefined'
)
}
}
模板中直接用：
<view v-for="item in filteredList" :key="item">{{ item }}</view>
注意点：
-
item != null同时排除null和undefined，比item !== null && item !== undefined更简洁 - 如果后端可能传字符串
"null"或"undefined"，需显式判断，否则会被当作有效值 - 避免在
computed中调用this.$nextTick或修改 data，否则触发警告
如果必须复用逻辑，把过滤函数抽成方法而非过滤器
想在多个组件共用空值判断规则？不要注册全局过滤器，改用工具函数 + computed：
// utils/filter.js
export const removeEmpty = (list) => {
return list.filter(item => item != null && item !== '' && item !== 'null')
}
组件内：
import { removeEmpty } from '@/utils/filter.js'
export default {
computed: {
filteredList() {
return removeEmpty(this.list)
}
}
}
这样做的好处：
- 类型安全：TypeScript 可推导输入/输出类型
- 可测试：函数可单独单元测试
- 跨平台稳定：不依赖 uni-app 对 filters 的有限支持（尤其小程序）
- 调试友好：console.log 直接看到清洗前后数组对比
最易被忽略的一点：空值判断逻辑必须和业务语义对齐。比如 0、false 算不算“空”？item?.id 是不是比 item 更准确？这些得在 filter() 条件里明确写死，而不是指望过滤器自动猜。
