vue3中基于customRef()实现一个自定义防抖ref函数

实现效果

需要我们自定义一个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>

后言

编写不完善的测试并实际运行，好过对完美测试的无尽等待