利用自定义ref实现防抖
1. debounce.js
import { customRef } from 'vue'; export function debounceRef(value, delay = 1000) { let timer; return customRef((track, trigger) => { return { get() { // 依赖收集 track(); return value; }, set(val) { clearTimeout(timer); timer = setTimeout(() => { // 派发更新 trigger(); value = val; }, delay); }, }; }); }
2. 使用
<input v-model="testVal" type="text" />
<p>{{ testVal }}</p>
import { debounceRef } from './components/debounce';
const testVal = debounceRef('');