当前位置：首页 > VUE

vue搜索逻辑的实现

2026-01-23 09:16:40VUE

Vue 搜索逻辑的实现

在 Vue 中实现搜索功能通常涉及数据绑定、过滤和事件处理。以下是几种常见的实现方式：

使用计算属性过滤列表

通过计算属性动态过滤数组，结合 v-model 实现实时搜索：

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 Lodash 防抖优化性能

当搜索触发频繁时（如输入联想），可以通过 Lodash 的 debounce 减少计算频率：

vue搜索逻辑的实现

import { debounce } from 'lodash'

export default {
  methods: {
    search: debounce(function(query) {
      // 实际搜索逻辑
    }, 500)
  }
}

服务端搜索实现

对于大数据量场景，建议通过 API 请求后端搜索接口：

export default {
  methods: {
    async searchItems() {
      try {
        const res = await axios.get('/api/items', {
          params: { q: this.searchQuery }
        })
        this.results = res.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}

多条件高级搜索

通过对象存储多个搜索条件，实现组合查询：

vue搜索逻辑的实现

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return (
        (!this.search.name || item.name.includes(this.search.name)) &&
        (!this.search.category || item.category === this.search.category)
      )
    })
  }
}

使用 Vuex 管理搜索状态

在大型应用中，可以通过 Vuex 集中管理搜索状态：

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

实现时需注意：