当前位置：首页 > VUE

vue实现静态查询

2026-01-07 00:23:33VUE

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())
    )
  }
}

这些方法可以根据实际需求组合使用，实现从简单到复杂的各种静态查询功能。对于大数据量场景，建议添加虚拟滚动或分页功能优化性能。

vue实现静态查询