<template>
<div class="container">
<input v-mode="text">
<p class="result">{{text}}</p>
</div>
</template>
<script setup>
import {dbounceRef} from './debounceRef';
const text = debounceRef('');
</script>
debounceRef.js
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);
},
},
});
};