vue实现静态查询
Vue 实现静态查询
在 Vue 中实现静态查询通常指不依赖后端接口，直接在前端处理数据筛选或搜索功能。以下是几种常见实现方式：
使用计算属性过滤数据
通过计算属性对静态数据进行筛选，适合简单查询场景：
<template>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</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>使用 methods 方法实现复杂查询
当查询逻辑较复杂时，可以使用 methods 方法：
methods: {
filterItems() {
return this.items.filter(item => {
const matchesSearch = item.name.toLowerCase().includes(
this.searchQuery.toLowerCase()
)
// 可以添加其他过滤条件
return matchesSearch
})
}
}结合 Lodash 进行高效查询
对于大数据量或需要性能优化的场景，可以使用 Lodash 的防抖函数：
import { debounce } from 'lodash'
export default {
data() {
return {
searchQuery: '',
filteredItems: []
}
},
watch: {
searchQuery: debounce(function(newVal) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(newVal.toLowerCase())
)
}, 300)
}
}实现多条件组合查询
对于需要多个筛选条件的场景：
computed: {
filteredItems() {
return this.items.filter(item => {
const matchesName = item.name.toLowerCase().includes(
this.searchQuery.toLowerCase()
)
const matchesCategory = this.selectedCategory
? item.category === this.selectedCategory
: true
return matchesName && matchesCategory
})
}
}使用 Vuex 管理静态查询
当数据需要在多个组件间共享时：
// store.js
state: {
items: [...],
searchQuery: ''
},
getters: {
filteredItems: state => {
return state.items.filter(item =>
item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
)
}
}这些方法可以根据实际需求组合使用，实现从简单到复杂的各种静态查询功能。对于大数据量场景，建议添加虚拟滚动或分页功能优化性能。
