uni-app怎么使用过滤器过滤列表中的重复数据-uni-app-PHP中文网

过滤器不能用于数组去重，因其只接收单个值、无响应式追踪且小程序不支持；应使用computed、methods或工具函数在数据层处理。

uni-app怎么使用过滤器过滤列表中的重复数据

过滤器（filters）不能用于去重——它只在模板插值和 v-bind 中生效，且不接收数组本身作为输入，更无法修改数据结构。想对列表去重，必须在数据层处理，而不是靠过滤器。

为什么不能用过滤器做数组去重

过滤器函数签名固定为 filter(value, ...args)，它接收的是单个值（比如 {{ item | unique }}），不是整个数组；你没法在过滤器里遍历、比对、筛掉重复项。即使强行写，也会出现：

模板中写 {{ list | uniqueFilter }} —— 但 uniqueFilter 收到的 list 是原始引用，返回新数组后，Vue 2 不会自动更新视图（无响应式追踪）
过滤器无法监听 list 的变化，也不会在 list 推送新项时重新执行
小程序平台压根不支持自定义过滤器，该写法在微信/支付宝小程序里直接失效

真正可用的去重方式：用 computed 或 methods

把去重逻辑提前到响应式计算阶段，确保结果可追踪、可复用、跨平台一致。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

按字段去重（如 id）：

computed: {
  uniqueList() {
    const seen = new Set()
    return this.rawList.filter(item => {
      const key = item.id + ''
      if (seen.has(key)) return false
      seen.add(key)
      return true
    })
  }
}

对象深比较去重（小数据量适用）：

computed: {
  uniqueList() {
    return this.rawList.filter((item, index, arr) =>
      index === arr.findIndex(i => JSON.stringify(i) === JSON.stringify(item))
    )
  }
}

注意：JSON.stringify 对函数、undefined、循环引用会出错，仅限简单对象

需要频繁增删时，改用方法封装（避免 computed 缓存干扰）：

methods: {
  getUniqueList(list, key = 'id') {
    const seen = new Set()
    return list.filter(item => {
      const val = item[key]
      if (seen.has(val)) return false
      seen.add(val)
      return true
    })
  }
}
// 模板中调用：
// <view v-for="item in getUniqueList(rawList)" :key="item.id"></view>

大数据量或复杂结构怎么办

如果 rawList 超过 500 条，或去重逻辑涉及嵌套属性、异步映射（如 ID → 名称）、服务端分页等，别在每次渲染时都跑一遍 filter：

在 onLoad 或请求回调里一次性去重并赋值：

this.uniqueList = this.removeDuplicates(this.rawList, 'id')

把去重工具提成独立函数（非 Vue 依赖），放在 utils/array.js：

export function uniqBy(arr, key) {
  if (!Array.isArray(arr)) return []
  const seen = new Set()
  return arr.filter(item => {
    const val = typeof key === 'function' ? key(item) : item[key]
    if (seen.has(val)) return false
    seen.add(val)
    return true
  })
}

然后在页面中 import { uniqBy } from '@/utils/array'