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来监听搜索词的变化。

<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' }
      ],
      filteredItems: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filteredItems = this.items.filter(item => 
        item.name.toLowerCase().includes(newVal.toLowerCase())
      )
    }
  },
  created() {
    this.filteredItems = [...this.items]
  }
}
</script>

使用第三方库实现更强大的搜索

对于更复杂的模糊匹配需求，可以使用第三方库如Fuse.js。

安装Fuse.js：

npm install fuse.js

在Vue中使用Fuse.js：

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

<script>
import Fuse from 'fuse.js'

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      fuse: null,
      searchResults: []
    }
  },
  created() {
    const options = {
      keys: ['name'],
      threshold: 0.4
    }
    this.fuse = new Fuse(this.items, options)
    this.searchResults = [...this.items]
  },
  watch: {
    searchQuery(newVal) {
      if (newVal.trim() === '') {
        this.searchResults = [...this.items]
      } else {
        this.searchResults = this.fuse.search(newVal).map(result => result.item)
      }
    }
  }
}
</script>

性能优化建议

对于大数据量的模糊查询，可以考虑以下优化措施：

• 使用防抖函数减少频繁触发搜索的次数
• 对数据进行分页处理，减少每次筛选的数据量
• 考虑使用Web Worker将搜索逻辑放到后台线程执行

防抖实现示例

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

<script>
import { debounce } from 'lodash'

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

以上方法提供了从简单到复杂的模糊查询实现方案，可以根据项目需求选择合适的方式。