一、概述：
二、代码：
1、app.vue：
<template>
<div>
<input type="text" v-model="msg" />
<h2>{{ msg }}</h2>
</div>
</template>
<script>
import debounceRef from "./hock/DebounceRef";
export default {
setup() {
const msg = debounceRef("Hello world");
return {
msg,
};
},
};
</script>
<style scoped>
</style>
2、debounceRef.js：
import { customRef } from "vue";
export default function (value, delay = 1000) {
return customRef((track, trigger) => {
let timer = null;
return {
get: function () {
track();
return value;
},
set(newValue) {
clearTimeout(timer);
timer = setTimeout(() => {
value = newValue;
trigger();
}, delay);
},
};
});
}
三、注意：
image.png
image.png
四、完成。
