<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>

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

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

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

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