<input v-model="text" />
<p>{{ text }}</p>
import { debounceRef } from './debounce'
const text = debounceRef("");
import { customRef } from "vue";
export function debounceRef(value, delay = 1000) {
let timer;
return customRef((track, trigger) => {
return {
get() {
//依赖收集 track()
track();
return value;
},
set(val) {
clearTimeout(timer);
timer = setTimeout(() => {
// 派发更新 trigger()
value = val;
trigger();
}, delay);
},
};
});
}
效果
![](https://img-blog.csdnimg.cn/img_convert/1c7c27aa7cb914a539602891fc23c183.png)