上一篇:
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>
下一篇: