vue实现实时查询
Vue实现实时查询的方法
使用v-model和watch监听输入变化
在Vue中可以通过v-model绑定输入框的值，配合watch监听输入变化实现实时查询。
<template>
<input v-model="query" placeholder="输入查询内容">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
query: '',
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.query.toLowerCase())
)
}
}
}
</script>使用debounce优化性能
对于高频输入的实时查询，可以使用debounce函数减少请求频率。
import { debounce } from 'lodash'
export default {
data() {
return {
query: '',
results: []
}
},
watch: {
query: debounce(function(newVal) {
this.search(newVal)
}, 500)
},
methods: {
search(query) {
// 调用API或处理数据
this.results = this.items.filter(item =>
item.name.includes(query)
)
}
}
}使用自定义指令实现实时搜索
可以创建自定义指令来处理输入事件。
Vue.directive('real-time', {
inserted(el, binding) {
el.addEventListener('input', binding.value)
}
})
// 使用方式
<input v-real-time="onInputChange">结合API请求实现实时查询
当需要从服务器获取数据时，可以在watch或computed中发起请求。
export default {
// ...
methods: {
async fetchResults(query) {
try {
const response = await axios.get('/api/search', { params: { q: query } })
this.results = response.data
} catch (error) {
console.error(error)
}
}
},
watch: {
query(newVal) {
if(newVal.length > 2) {
this.fetchResults(newVal)
}
}
}
}使用第三方库实现高级搜索
对于复杂场景，可以考虑使用VueUse等工具库。
import { useDebounceFn } from '@vueuse/core'
export default {
setup() {
const query = ref('')
const results = ref([])
const debouncedSearch = useDebounceFn(() => {
// 搜索逻辑
}, 500)
watch(query, debouncedSearch)
return { query, results }
}
}以上方法可以根据具体需求选择使用，简单场景使用computed属性即可，复杂场景可结合debounce和API请求优化性能。
