当前位置：首页 > news >正文

`customRef` 在实战中的使用：防抖、计算属性缓存和异步数据获取

news 来源：原创 2025/6/22 8:37:26

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过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);