vue本地查询代码实现
Vue 本地查询代码实现
使用计算属性实现本地查询
计算属性是Vue中处理本地数据查询的高效方式，适用于依赖响应式数据的场景。定义一个计算属性，根据输入的关键词过滤数组。
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}模板中绑定搜索输入和结果展示：
<input v-model="searchQuery" placeholder="Search">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>使用方法实现动态查询
对于需要更复杂逻辑或手动触发的查询，可以使用方法。定义一个方法处理查询逻辑，通过事件触发或watch调用。
methods: {
filterItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}通过watch监听搜索词变化：
watch: {
searchQuery(newVal) {
this.filteredItems = this.filterItems()
}
}使用lodash实现防抖查询
对于高频输入的搜索场景，引入lodash的debounce函数减少计算频率，优化性能。
import { debounce } from 'lodash'
methods: {
debouncedSearch: debounce(function() {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}, 300)
},
watch: {
searchQuery() {
this.debouncedSearch()
}
}多条件复合查询
当需要基于多个字段进行复合查询时，扩展过滤逻辑，结合多个条件判断。
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
item.description.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}使用Vuex管理查询状态
在大型应用中，通过Vuex集中管理搜索状态和逻辑，保持数据流清晰。
// store.js
state: {
items: [...],
searchQuery: ''
},
getters: {
filteredItems: state => {
return state.items.filter(item =>
item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
)
}
}组件中通过mapGetters获取过滤后的数据：
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['filteredItems'])
}
