vue 2.0 实现filterby

Vue 2.0 实现 filterBy 功能

Vue 2.0 移除了内置的 filterBy 过滤器，但可以通过计算属性或方法实现类似功能。以下是几种实现方式：

使用计算属性过滤数组

计算属性会根据依赖自动更新，适合对数组进行动态过滤。

new Vue({
  el: '#app',
  data: {
    searchQuery: '',
    items: [
      { name: 'Apple', category: 'fruit' },
      { name: 'Carrot', category: 'vegetable' },
      { name: 'Banana', category: 'fruit' }
    ]
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item => 
        item.name.toLowerCase().includes(query) ||
        item.category.toLowerCase().includes(query)
      )
    }
  }
})

使用方法进行过滤

如果需要更灵活的过滤逻辑，可以在方法中实现：

methods: {
  filterBy(items, query) {
    if (!query) return items
    query = query.toLowerCase()
    return items.filter(item => 
      item.name.toLowerCase().includes(query) ||
      item.category.toLowerCase().includes(query)
    )
  }
}

使用 Lodash 等工具库

对于复杂过滤需求，可以使用 Lodash 的 _.filter 或 _.debounce 实现性能优化：

import _ from 'lodash'

computed: {
  filteredItems: _.debounce(function() {
    const query = this.searchQuery.toLowerCase()
    return this.items.filter(item => 
      item.name.toLowerCase().includes(query)
    )
  }, 500)
}

注册全局过滤器

虽然 Vue 2.x 不推荐过滤器用于复杂逻辑，但可以注册全局过滤器用于简单文本处理：

Vue.filter('filterBy', function(value, query) {
  if (!query) return value
  query = query.toLowerCase()
  return value.filter(item => 
    item.name.toLowerCase().includes(query)
  )
})

使用方式：

<div v-for="item in items | filterBy searchQuery">
  {{ item.name }}
</div>

注意事项

• 对于大型数据集，考虑使用分页或虚拟滚动优化性能
• 复杂过滤条件可以组合多个计算属性
• 服务端过滤可能更适合超大数据集