vue实现模糊查阅原理

vue实现模糊查询原理

模糊查询通常基于用户输入的关键词，在数据集中匹配包含该关键词的条目。Vue实现的核心在于结合v-model监听输入、实时过滤数据并渲染结果。

数据绑定与监听

使用v-model双向绑定输入框的值，监听用户输入变化：

<input v-model="searchText" placeholder="输入关键词">

在Vue实例中定义响应式数据：

data() {
  return {
    searchText: '',
    originalData: ['Apple', 'Banana', 'Orange'] // 原始数据
  }
}

计算属性过滤数据

通过computed属性实时计算匹配结果，利用filter和includes（或正则表达式）进行模糊匹配：

computed: {
  filteredData() {
    return this.originalData.filter(item => 
      item.toLowerCase().includes(this.searchText.toLowerCase())
    )
  }
}

渲染结果列表

将过滤后的数据通过v-for动态渲染：

<ul>
  <li v-for="item in filteredData" :key="item">
    {{ item }}
  </li>
</ul>

优化匹配逻辑

如需更复杂的匹配（如拼音搜索、权重排序），可引入第三方库如fuse.js：

import Fuse from 'fuse.js'

computed: {
  fuse() {
    return new Fuse(this.originalData, { keys: ['name'] })
  },
  filteredData() {
    return this.searchText 
      ? this.fuse.search(this.searchText).map(r => r.item)
      : this.originalData
  }
}

性能注意事项

大数据量时考虑防抖（lodash.debounce）减少计算频率：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    // 过滤逻辑
  }, 300)
}