【Vue】Vue项目需求--实现搜索框输入防抖处理

文章目录

• ⭐前言
• 🐉源码 （Vue-组合式API）
• 📕效果演示
• 拓展说明
• 🦖欢迎查阅Sam9029 的其他文章

---

⭐前言

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

场景需求

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

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

想想如何才能在vue中实现

具体思路

如下：

---

🐉源码 （Vue-组合式API）

<template>
    <div class="searchCont">

    <!--    搜索input    -->
    <input type="text" placeholder="Search" v-model="keyword" />
    <!-- 展示v-model数据双向绑定      -->
    <div>
      <label for="">v-model测试：</label>{{keyword}}
    </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, watch, ref } from "vue";

// 搜索数据的 防抖 处理
// v-model 加上 watch 监听
let keyword = ref()

// // 给搜索事件 绑定 防抖
// 因为 ⭐❗⭐❗防抖函数定义 返回的是一个回调函数, 我们可以用一个变量来接收
const searchInput = debounce(searchEvent,1000)

// 使用watch 监听变化
watch(keyword,()=>{
  searchInput()
  //注意，你可能会觉得 这样写可以,但是不可以，不可以，不可以
  // (debounce(searchEvent,1000))()
  // 因为这样做，你是在重复创建新的 防抖函数，所以会（一次改变就执行一次）不断执行
  //而放在变量里面就不是这样，每次调用变量执行相同地址的函数，及同一个防抖函数，
})

//搜索事件
function searchEvent(){
  console.log('执行搜索')
}


// //     防抖函数
function debounce(foo,delay){
  let timer;
  return function(){
      if(timer) clearTimeout(timer);
      timer = setTimeout(()=>{
          // 暂时理解不了（this，arguments）指向改变的问题
          foo.call(this,arguments)
          // 不输入延迟 则默认 1000 ms
      },delay || 1000)
  }
}

</script>

• 需要选项式API 的源码请查看 选项式API实现-Vue项目需求–实现搜索框输入防抖处理

🐸源码解读

• 仔细阅读源码后，你会发现有这几个对象

• 需要注意的地方–使用变量来接收 防抖函数 返回的回调函数
  • 入此处不理解–请看【JS-工具类】防抖与节流—在定义时返回的是回调函数–sam9029
  • 以及 防抖函数源码
  • /⭐❗⭐❗防抖函数定义 返回的是一个回调函数, 我们可以用一个变量来接收

// // 给搜索事件 绑定 防抖
const searchInput = debounce(searchEvent,1000)

• 另一个需要注意的地方-使用watch监听的时候 调用 绑定了防抖的搜索事件

// 使用watch 监听变化
const searchInput = debounce(searchEvent,1000)
watch(keyword,()=>{
  //正确写法，调用 接收 绑定防抖的事件的 变量
  //searchInput() 
  //错误写法
  (debounce(searchEvent,1000))()
})

---

📕效果演示

• 额，gif图搞不起，先上CodePen.io 在线演示效果 （demo）

拓展说明

• 关于防抖函数的更多内容 详情请看 我写的这一篇文章【JS-工具类】防抖与节流—在定义时返回的是回调函数–sam9029
  • 文章中还指出了 防抖函数 使用时 需要特别注意的地方（回调函数的调用方式）

参考：

**🐱‍🐉🐱‍🐉文章若有错误，敬请指正🙏**

---

🦖欢迎查阅Sam9029 的其他文章

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**