vue实现静态查询
Vue 实现静态查询的方法
在 Vue 中实现静态查询通常指在不依赖后端接口的情况下，直接对本地数据进行筛选或过滤。以下是几种常见的方法：
使用计算属性过滤数据
计算属性适合基于响应式数据动态过滤结果，无需手动触发。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索..." />
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
};
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}
};
</script>使用方法触发查询
如果需要手动触发查询（如点击按钮），可以使用方法而非计算属性。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索..." />
<button @click="search">查询</button>
<ul>
<li v-for="item in result" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
],
result: []
};
},
methods: {
search() {
this.result = this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}
};
</script>使用 Vue 3 的 ref 和 computed
在 Vue 3 中，可以通过 ref 和 computed 实现类似功能。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索..." />
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const searchQuery = ref('');
const items = ref([
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]);
const filteredItems = computed(() =>
items.value.filter(item =>
item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
);
return { searchQuery, filteredItems };
}
};
</script>结合 Lodash 进行复杂查询
若需更复杂的查询逻辑（如模糊搜索、多条件筛选），可以引入 Lodash 库。
import _ from 'lodash';
// 在计算属性或方法中使用
filteredItems() {
return _.filter(this.items, item =>
_.includes(item.name.toLowerCase(), this.searchQuery.toLowerCase())
);
}静态查询的注意事项
- 性能优化：对于大型数据集，避免频繁触发过滤操作，可使用防抖（
debounce）或节流（throttle）。 - 大小写处理：统一转为小写或大写后再比较，避免大小写敏感问题。
- 多字段查询：扩展过滤逻辑以支持多个字段的联合查询。
通过上述方法，可以灵活实现 Vue 中的静态查询功能。
