摘要

customRef 是一個高階 API，它允許我們完全自訂一個 ref 的行為，包括對其依賴追蹤 (track) 和變更通知 (trigger) 的精確控制。

定義與說明

customRef 接收一個工廠函數作為參數。該工廠函數會接收 track 和 trigger 兩個函數作為參數，並必須回傳一個帶有 get 和 set 方法的物件。你可以在 get 中手動呼叫 track() 來收集依賴，在 set 中手動呼叫 trigger() 來通知更新。

實作範例

Vue SFC

// 實現一個帶有 debounce（防抖）功能的 ref。
import { customRef } from 'vue';

function useDebouncedRef(value, delay = 200) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 告訴 Vue 追蹤這個依賴
        return value;
      },
      set(newValue) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger(); // 在延遲後，告訴 Vue 更新畫面
        }, delay);
      }
    };
  });
}

// const text = useDebouncedRef('hello');

結論

customRef 為我們打開了 Vue 響應式系統的底層控制大門。它可以用於實現如防抖、節流、與外部狀態同步等複雜的自訂響應式行為。

customRef 自訂響應式 track/trigger