利用自定義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('');