🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

在 Vue3 中，customRef 允許你創建自定義的響應式引用，這為你提供了對依賴追蹤和觸發更新的完全控制。

使用場景

• 防抖和節流：在處理輸入框等頻繁觸發的事件時，可以使用 customRef 實現防抖或節流，以減少不必要的更新。
• 計算屬性的緩存：可以使用 customRef 來實現自定義的計算屬性，這些屬性只在相關依賴發生變化時重新計算。
• 異步數據獲取：在需要根據異步數據創建響應式引用時，customRef 可以幫助管理數據的響應性。

示例

防抖

import { customRef } from 'vue';function useDebouncedRef(value, delay) {
let timeout;
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger();
}, delay);
}
};
});// 使用
const debouncedInput = useDebouncedRef('', 500);

計算屬性的緩存

import { customRef, watchEffect } from 'vue';function useComputedRef(getter) {
let value;
let dirty = true;
return customRef((track, trigger) => {
watchEffect(() => {
if (dirty) {
value = getter();
dirty = false;
}
track();
});
return {
get() {
if (dirty) {
value = getter();
dirty = false;
}
return value;
},
set(newValue) {
value = newValue;
dirty = true;
trigger();
}
};
});// 使用
const count = ref(0);
const doubled = useComputedRef(() => count.value * 2);

異步數據獲取

import { customRef } from 'vue';function useAsyncRef(asyncFn) {
let value;
let loading = true;
asyncFn().then(result => {
value = result;
loading = false;
}).catch(error => {
console.error(error);
loading = false;
});
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue) {
value = newValue;
trigger();
}
};
});// 使用
const asyncData = useAsyncRef(fetchSomeData);

總結

customRef 提供了一種創建自定義響應式引用的方式，它允許開發者實現更復雜的數據響應邏輯。通過 customRef，你可以控制何時進行依賴追蹤，何時觸發更新，以及如何處理數據的緩存和異步獲取。這在需要精細控制響應式行為的場景中非常有用。