vue filter实现搜索

实现搜索功能的 Vue Filter

在 Vue 中可以通过自定义过滤器（filter）来实现搜索功能。以下是几种常见的实现方式：

使用计算属性实现搜索

计算属性是更推荐的方式，因为它能更好地利用 Vue 的响应式系统：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

注册全局过滤器

可以在全局注册一个搜索过滤器：

Vue.filter('search', function(items, searchQuery) {
  if (!searchQuery) return items
  return items.filter(item => 
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  )
})

使用方式：

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

局部过滤器实现

在组件内部定义过滤器：

filters: {
  search(items, searchQuery) {
    if (!searchQuery) return items
    return items.filter(item => 
      item.title.toLowerCase().includes(searchQuery.toLowerCase())
    )
  }
}

模板中使用：

<ul>
  <li v-for="item in items | search(searchQuery)">
    {{ item.title }}
  </li>
</ul>

多字段搜索实现

扩展过滤器支持多字段搜索：

Vue.filter('search', function(items, searchQuery, fields) {
  if (!searchQuery) return items
  return items.filter(item => {
    return fields.some(field => 
      String(item[field]).toLowerCase().includes(searchQuery.toLowerCase())
    )
  })
})

使用方式：

<div v-for="item in items | search(searchQuery, ['name', 'description'])">
  {{ item.name }}
</div>

性能优化建议

对于大型数据集，考虑以下优化：

• 使用防抖技术减少频繁过滤
• 预先处理数据（如小写转换）
• 使用 Web Worker 进行后台处理
• 考虑分页加载结果

注意：Vue 3 已移除过滤器的概念，推荐使用方法或计算属性实现类似功能。