Vue3：搜索框输入防抖实现整理笔记

目录

场景需求

前言

防抖 & 节流

防抖

节流

输入防抖存在的问题

指令实现

总结

---

在Vue开发中，遇到了搜索框输入防抖处理，算是防抖的使用场景之一吧，抽象其逻辑记录下来以备后用

场景需求

作为开发人员，一定要先搞清楚场景需求是什么

• 场景需求：
  • 搜索输入时 ，判断用户在输入完成后 实现即时的自动搜索
  • 并且要防止过度自动搜索消耗性能

想想如何才能在vue中实现

前言

「搜索」这个场景在各种业务的系统中都是是非常常见的，比如电商平台的商品搜索、百度搜索、掘金搜索、google搜索......，只要是有内容呈现给用户的，都少不了搜索功能。

按照触发搜索动作的不同可分为：

1. 输完关键字后手动触发搜索
2. 输入字符自动搜索

第一种是由用户去决定何时进行搜索，没啥问题。

第二种是通过监听用户录入的事件自动搜索，自动搜索能在一定程度上提升用户体验（比如在用户输入时关键词联想提示），同时也可能会带来问题，因为input事件触发是非常频繁的，比如下面这个示例：

打