vue实现同步检索

Vue 实现同步检索的方法

使用计算属性实现同步检索

计算属性能够根据依赖的响应式数据自动更新，适合实现简单的同步检索功能。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <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选项。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      filteredItems: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filterItems(newVal)
    }
  },
  methods: {
    filterItems(query) {
      if (!query) {
        this.filteredItems = [...this.items]
        return
      }
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  },
  created() {
    // 模拟异步数据获取
    setTimeout(() => {
      this.items = [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
      this.filteredItems = [...this.items]
    }, 500)
  }
}
</script>

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

对于更复杂的检索需求，可以考虑使用专门的前端搜索库如Fuse.js。

import Fuse from 'fuse.js'

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      fuse: null,
      searchResults: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.searchResults = newVal ? this.fuse.search(newVal) : this.items
    }
  },
  created() {
    // 模拟异步数据获取
    setTimeout(() => {
      this.items = [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
      // 初始化Fuse.js
      const options = {
        keys: ['name'],
        threshold: 0.4
      }
      this.fuse = new Fuse(this.items, options)
      this.searchResults = [...this.items]
    }, 500)
  }
}

使用自定义指令实现实时检索

可以创建自定义指令来实现更灵活的检索功能。

Vue.directive('search', {
  bind(el, binding, vnode) {
    const vm = vnode.context
    el.addEventListener('input', (e) => {
      vm[binding.expression] = e.target.value
    })
  }
})

// 在组件中使用
<template>
  <input v-search="searchQuery" />
</template>

性能优化建议

对于大型数据集，考虑使用防抖技术减少频繁检索带来的性能问题。

import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      filteredItems: []
    }
  },
  created() {
    this.debouncedFilter = _.debounce(this.filterItems, 300)
  },
  watch: {
    searchQuery(newVal) {
      this.debouncedFilter(newVal)
    }
  },
  methods: {
    filterItems(query) {
      // 检索逻辑
    }
  }
}

以上方法可以根据具体需求选择使用，计算属性适合简单场景，watch适合复杂逻辑，第三方库提供高级功能，自定义指令增加灵活性，性能优化确保大规模数据下的流畅体验。