Vue.js如何优化实现高可扩展的对象列表过滤功能

核心思路是把所有过滤规则抽成统一配置，消除重复的函数定义和模板代码，后续新增筛选项只需要改配置，不需要动核心逻辑和模板。

第一步：抽离过滤器配置 #

把所有筛选项的唯一标识、显示文本、匹配规则集中存在配置数组里，后续新增过滤项只需要往这个数组加一条配置即可：

const filterConfigs = [
  {
    key: 'Unlabeled',
    label: 'Unlabeled',
    // 每条记录的匹配规则，和原有where逻辑完全一致
    match: (record) => record.skipped === false && record.processed === false
  },
  {
    key: 'Completed',
    label: 'Completed',
    match: (record) => record.processed === true
  },
  {
    key: 'Skipped',
    label: 'Skipped',
    match: (record) => record.processed === false && record.skipped === true
  }
]

第二步：统一状态与逻辑 #

删掉原来三个独立的getXxxRecords函数，用通用方法+响应式计算属性替代，自动追踪状态变化更新结果，不需要手动赋值同步：

import { ref, computed } from 'vue'

// 当前选中的过滤器，默认选中未标注
const currentFilter = ref('Unlabeled')

// 基础数据集包装
const getBaseRecords = () => collect(props.records)

// 通用过滤方法，根据传入的过滤器key返回对应结果
const getRecordsByFilter = (filterKey) => {
  const config = filterConfigs.find(item => item.key === filterKey)
  return getBaseRecords().filter(config.match)
}

// 当前过滤后的结果集，自动响应props.records变化、过滤器切换，不需要手动更新
const filteredRecords = computed(() => getRecordsByFilter(currentFilter.value))

// 当前展示给用户的记录，自动跟随过滤结果更新
const currentRecord = computed(() => filteredRecords.value.first())

第三步：简化模板 #

删掉三个重复的<a>标签，直接遍历配置渲染，后续加筛选项模板完全不需要修改：

<a 
  v-for="config in filterConfigs"
  :key="config.key"
  :class="{'bg-gray-100' : currentFilter === config.key }"
  @click="currentFilter = config.key"
>
  {{ config.label }} ({{ getRecordsByFilter(config.key).count() }})
</a>

方案优势 #

• 可扩展性极强：新增筛选项只需要在filterConfigs里加一条配置，写好匹配规则即可，不需要新增函数、不需要修改模板，没有冗余代码
• 逻辑集中：所有过滤规则统一维护，后续修改规则不需要散落在代码各处找逻辑
• 响应式更可靠：用computed做自动更新，不管是后端返回的props.records更新、还是用户切换过滤器，关联的结果集、当前展示记录都会自动同步，不会出现手动赋值漏更新的问题
• 支持复杂扩展：后续如果要加搜索、多条件组合过滤，只需要在getRecordsByFilter方法里扩展通用逻辑，所有过滤器都可以复用能力。

注：原有代码里的Unlablled是拼写错误，配置里已经修正为正确的Unlabeled。

内容的提问来源于stack exchange，提问作者oliverbj