Vuetify Autocomplete搜索11万+股票数据卡顿问题及解决方案咨询

嘿，这个卡顿问题太典型了！一次性在前端加载11万+数据，不管是内存存储还是实时过滤，都会把浏览器的CPU和内存拉满，不卡才怪呢。你猜的没错，把搜索逻辑搬到后端处理才是最优解，下面给你几个可行的方案，还有具体的代码修改建议：

一、最优方案：后端实现搜索+分页查询（强烈推荐） #

核心思路是：前端只传递用户输入的搜索词给后端，后端负责根据关键词匹配股票代码/名称，只返回少量符合条件的结果（比如20条），而不是全量11万条数据。这样前端处理的数据量会极小，完全不会卡顿。

1. 后端API改造 #

让你的后端接口支持两个参数：

• search：用户输入的搜索关键词（比如用户输入"A"，后端匹配Symbol或Name包含"A"的记录）
• limit：返回结果的数量（比如固定返回20条，足够Autocomplete下拉显示）

比如接口地址改成：http://localhost/API/searchSymbols，请求时带参数：?search=xxx&limit=20

后端需要做的：

• 针对Symbol和Name字段做模糊查询（比如SQL里用LIKE '%xxx%'，如果是NoSQL就用对应的模糊匹配语法）
• 限制返回结果数量，避免一次性返回太多

2. 前端代码修改 #

修改你的watch逻辑，每次用户输入搜索词时，都把关键词传给后端，只获取匹配的结果，而不是全量拉取：

import Chart from './GChart.vue'
export default {
  name: "Search",
  components: {
    Chart,
  },
  data: () => ({
    symbolsExchangesNames: [],
    isLoading: false,
    model: null,
    search: null
  }),
  watch: {
    // 监听搜索词变化，实时请求后端搜索接口
    search(val) {
      // 如果搜索词为空，可以清空结果或者返回热门数据
      if (!val) {
        this.symbolsExchangesNames = [];
        return;
      }

      this.isLoading = true;
      // 把搜索词和分页参数传给后端，用encodeURIComponent处理特殊字符
      fetch(`http://localhost/API/searchSymbols?search=${encodeURIComponent(val)}&limit=20`)
        .then(res => res.json())
        .then(res => {
          // 直接替换结果，不需要存全量数据
          this.symbolsExchangesNames = res.map(item => ({
            Code: item.Symbol,
            Exchange: item.Exchange,
            Name: item.Name,
            CodeAndName: `${item.Symbol} ${item.Name}`
          }));
        })
        .catch(err => {
          console.log(err);
          this.symbolsExchangesNames = [];
        })
        .finally(() => (this.isLoading = false));
    }
  }
}

同时，在你的Vuetify Autocomplete组件上，记得绑定loading状态：

<v-autocomplete
  v-model="model"
  :search-input.sync="search"
  :items="symbolsExchangesNames"
  :loading="isLoading"
  item-text="CodeAndName"
  item-value="Code"
  placeholder="搜索股票代码或名称"
></v-autocomplete>

二、次优方案：前端虚拟滚动（适合后端暂时无法修改的情况） #

如果后端暂时改不了，只能全量加载数据，那可以用Vuetify Autocomplete的虚拟滚动功能，它只会渲染当前可见区域的DOM元素，大大减少DOM数量，缓解卡顿：

1. 保留你原来的全量数据拉取逻辑（第一次加载时获取所有11万条数据）
2. 开启组件的virtual-scroll属性，设置固定高度

修改后的组件代码：

<v-autocomplete
  v-model="model"
  :search-input.sync="search"
  :items="symbolsExchangesNames"
  :loading="isLoading"
  item-text="CodeAndName"
  item-value="Code"
  placeholder="搜索股票代码或名称"
  virtual-scroll
  height="400"
></v-autocomplete>

但注意：这个方案只是缓解卡顿，11万条数据存在前端内存里还是会占用不少资源，长期来看还是推荐后端处理。

为什么你原来的代码会卡？ #

你原来的逻辑是第一次搜索就拉取全量11万条数据，之后所有搜索都在前端遍历过滤，每次用户输入一个字符，浏览器都要遍历11万条数据做匹配，CPU直接拉满，自然会卡好几秒。

内容的提问来源于stack exchange，提问作者mismaah