实现效果
需要我们自定义一个vue3中的响应式ref函数，并且用这个函数实现一个防抖的效果
要求
要求一：我们在input框中输入内容 下面的内容进行更改 跟input更改一致
要求二：当我们输入后，等待多少秒 下面的内容进行更新
要求三：在我们输入后，没有达到我们设定的时间 不会进行更新 然后我们继续输入 停止输入后 等待时间达到 才会进行更新
在线演示
链接：https://pan.baidu.com/s/1XR09yGT8ou8rHjo0tR6WJQ?pwd=6k8a
提取码：6k8a
代码
<template> <div> <input type="text" v-model="keyWord" /> {{ keyWord }} </div> </template> <script> import { onMounted, reactive, ref, customRef } from "vue"; export default { name: "MyVueAppApp", setup(props, context) { // let keyWord = ref("hello") // 自定义ref function myRef(value,delay) { let timer // customRef() 用于自定义ref函数 return customRef((track, trigger) => { return { get() { track(); // 通知vue追踪vue的value的变化 return value; }, set(newValue) { console.log(newValue); clearTimeout(timer) timer = setTimeout(() => { // 修改数据 value = newValue; // 通知vue去重新解析模板 trigger(); }, delay); }, }; }); } // 使用程序员自定义的ref let keyWord = myRef("hello",500); return { keyWord }; }, }; </script> <style lang="css" scoped> </style>
后言
编写不完善的测试并实际运行，好过对完美测试的无尽等待
