vue搜索逻辑的实现
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 减少计算频率：
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)
}
}
}
}多条件高级搜索
通过对象存储多个搜索条件，实现组合查询：
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)
)
}
}
})实现时需注意：
- 对中文输入法使用
@input而非@change - 移动端考虑添加搜索按钮触发
- 空搜索结果时显示友好提示
- 大数据量考虑虚拟滚动优化性能
