14.0 vue3 customRef的使用

上一篇：

vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef，customRef是vue3的一大亮点，custom的意思大家都懂，自定义的意思，一旦出现自定义，那么就代表我们可以做很多基于自己的需求的操作，vue3的官方文档的关于这块的示例其实已经蛮不错了，看代码

需求是这样，我们需要做一个模糊搜索 输入框防抖的效果，在输入框内输入内容，一秒内不再输入就去发送请求，代码如下：

<template>
  <input type="text" v-model="value" />
</template>

<script>
import { customRef, ref } from "vue";

export default {
  name: "Demo",
  setup() {
    /*
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，
该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。
使用自定义 ref 通过 v-model 实现 debounce 的示例：
*/
    function myRef(value, delay = 300) {
      let timer = null;
      return customRef((track, trigger) => {
        return {
          get() {
            track(); //通知vue去追踪value值的变化
            return value;
          },
          set(newValue) {
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              trigger(); //通知vue去重新进行解析
              getData();
            }, delay);
          },
        };
      });
    }
    // 发送请求的方法
    function getData() {
      console.log(value.value);
    }

    // let value = ref("大家好");  //使用vue提供的ref
    let value = myRef("", 1000); //使用我们自定义的ref
    return {
      value,
    };
  },
};
</script>

下一篇：

15.0 vue3 provide&inject_十一月的萧邦-CSDN博客上一篇：14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇：vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef，customRef是vue3的一大亮点，custom的意思大家都懂，自定义的意思，一旦出现自定义，那么就代表我们可以做很多基于自己的需求的操作，vue3的官方文档的关于这块的示例其实已经蛮不错了，看代码需求是这样，我们需https://blog.csdn.net/qq_42543244/article/details/122869521