废话不多说,直接看效果
直接上代码,首先创建一个useDebounceRef.js
import { customRef } from "vue";
export default function(value) {
let timer = null;
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue) {
clearTimeout(timer);
timer = setTimeout(() => {
value = newValue;
trigger();
}, 1000);
},
};
});
}
然后在页面使用
<div>
<input type="text" v-model="message" />
{{ message }}
</div>
setup() {
const message = debounceRef("lsh");
return {
message,
};
}
customRef