当前位置：首页 > VUE

vue实现实时搜索

2026-02-22 05:03:46VUE

实现实时搜索的基本思路

在Vue中实现实时搜索通常需要结合v-model绑定输入框数据，监听输入变化，并通过防抖（debounce）或节流（throttle）优化性能。以下是具体实现方法：

方法一：使用`v-model`和`watch`

模板部分
使用v-model绑定输入框的值，并监听输入事件（可选）：

<template>
  <input v-model="searchQuery" placeholder="输入关键词搜索" />
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

脚本部分
通过watch监听searchQuery的变化，实时过滤数据：

<script>
export default {
  data() {
    return {
      searchQuery: '',
      fullList: [], // 原始数据
      filteredList: [] // 过滤后的结果
    };
  },
  watch: {
    searchQuery(newVal) {
      this.filteredList = this.fullList.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      );
    }
  },
  async created() {
    this.fullList = await fetchData(); // 假设从API获取数据
    this.filteredList = this.fullList; // 初始化显示全部数据
  }
};
</script>

方法二：使用计算属性（适合静态数据）

如果数据量较小或无需异步加载，可直接通过计算属性过滤：

<script>
export default {
  data() {
    return {
      searchQuery: '',
      fullList: [] // 原始数据
    };
  },
  computed: {
    filteredList() {
      return this.fullList.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

方法三：添加防抖优化

频繁输入时，通过防抖减少请求或计算次数：

安装Lodash
```
npm install lodash
```

在组件中使用防抖

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      filteredList: []
    };
  },
  methods: {
    handleSearch: debounce(function() {
      // 模拟API请求或过滤逻辑
      this.filteredList = this.fullList.filter(item =>
        item.name.includes(this.searchQuery)
      );
    }, 300) // 延迟300毫秒
  },
  watch: {
    searchQuery() {
      this.handleSearch();
    }
  }
};
</script>

方法四：结合API请求（动态加载结果）

若需根据输入实时请求后端接口：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      results: []
    };
  },
  methods: {
    fetchResults: debounce(async function() {
      if (!this.searchQuery.trim()) return;
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      });
      this.results = response.data;
    }, 500)
  },
  watch: {
    searchQuery() {
      this.fetchResults();
    }
  }
};
</script>