当前位置：首页 > VUE

vue实现搜索过滤

2026-03-07 21:21:22VUE

实现搜索过滤的基本思路

在Vue中实现搜索过滤功能通常涉及以下几个核心步骤：监听用户输入、过滤数据列表、动态渲染结果。以下是具体实现方法。

使用计算属性过滤数据

计算属性是Vue中实现响应式数据过滤的推荐方式，依赖的数据变化时会自动重新计算。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用watch监听输入变化

当需要更复杂的逻辑或异步操作时，可以使用watch监听搜索词变化。

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      filteredItems: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      )
    }
  },
  created() {
    // 假设从API获取数据
    this.items = [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
    this.filteredItems = [...this.items]
  }
}

使用第三方库实现高级搜索

对于更复杂的搜索需求，可以使用如Fuse.js这类模糊搜索库。

import Fuse from 'fuse.js'

export default {
  computed: {
    filteredItems() {
      const fuse = new Fuse(this.items, {
        keys: ['name'],
        threshold: 0.3
      })
      return this.searchQuery
        ? fuse.search(this.searchQuery).map(result => result.item)
        : this.items
    }
  }
}

结合Vuex的状态管理

在大型应用中，搜索状态可能需要在多个组件间共享，可以使用Vuex管理搜索逻辑。

// store.js
export default new Vuex.Store({
  state: {
    searchQuery: '',
    items: []
  },
  getters: {
    filteredItems: state => {
      return state.items.filter(item =>
        item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
      )
    }
  }
})

性能优化技巧

对于大数据量列表，可以考虑以下优化方案：

vue实现搜索过滤

添加防抖处理输入事件，避免频繁触发过滤
使用虚拟滚动只渲染可见项
对数据进行分页处理

import { debounce } from 'lodash'

export default {
  methods: {
    handleSearch: debounce(function(query) {
      this.searchQuery = query
    }, 300)
  }
}

标签: vue