各位靓仔靓女们，大家好！我是你们的老朋友，今天咱们来聊聊 Vue 3 源码里一个挺有意思的小东西：customRef。
啥是 customRef 呢？ 简单来说，它就像一个超级英雄，能让你完全掌控一个 ref 的依赖追踪和更新触发。 想象一下，你拥有了控制权，想啥时候更新就啥时候更新，想咋追踪就咋追踪，是不是感觉很爽？
一、为啥需要 customRef？
在 Vue 中，我们通常用 ref 或 reactive 来创建响应式数据。 Vue 会自动追踪这些数据的变化，并在数据改变时更新视图。 但有时候，自动挡可能不够用，我们需要手动挡。
举个栗子：
- 防抖 (Debounce)： 搜索框输入的时候，我们希望用户停止输入一段时间后再发起请求，而不是每次输入都请求一次。
- 节流 (Throttle)： 比如监听
scroll事件，我们不希望事件触发频率过高，而是每隔一段时间执行一次。 - 延迟更新：有时候我们希望数据改变后，延迟一段时间再更新视图。
这些场景，用普通的 ref 就不太好处理了，这时候 customRef 就派上用场了。
二、customRef 的基本用法
customRef 接受一个函数作为参数，这个函数需要返回一个对象，这个对象必须包含 get 和 set 两个属性，分别用于获取和设置 ref 的值。
import { customRef } from 'vue'
function useDebouncedRef(value, delay) {
let timeout
return customRef((track, trigger) => {
return {
get() {
track() // 告诉 Vue 追踪这个 ref 的依赖
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger() // 告诉 Vue 触发更新
}, delay)
}
}
})
}
// 使用
import { ref, watch } from 'vue'
export default {
setup() {
const debouncedValue = useDebouncedRef('', 500) // 500ms 防抖
const inputValue = ref('')
watch(inputValue, (newValue) => {
debouncedValue.value = newValue
})
return {
inputValue,
debouncedValue,
}
},
template: `
<input v-model="inputValue" />
<p>Debounced Value: {{ debouncedValue }}</p>
`
}这个例子中，useDebouncedRef 就是一个自定义的 ref，它实现了防抖功能。
track(): 这个函数告诉 Vue，当前get操作需要被追踪。 也就是说，当debouncedValue.value被访问时，Vue 会记录下当前的组件或 effect 依赖了这个ref。trigger(): 这个函数告诉 Vue，当前ref的值发生了改变，需要触发更新。 Vue 会找到所有依赖这个ref的组件或 effect，并重新渲染或执行。
三、深入源码分析 (Simplified)
虽然我们不能直接看到 Vue 3 的完整源码，但我们可以根据官方文档和一些开源项目，来推断 customRef 的实现原理。
可以简单理解为：customRef 内部维护了一个依赖收集器和一个更新派发器。
-
依赖收集 (Track)
当
get方法被调用时，track()函数会被执行。track()函数会将当前正在执行的 effect (比如组件的渲染函数) 注册到ref的依赖列表中。你可以想象成一个表格：
Ref 依赖的 Effect refA 组件A渲染函数, effect1, effect2 refB 组件B渲染函数, effect3 这样，Vue 就知道哪些组件或 effect 依赖了这个
ref。 -
更新派发 (Trigger)
当
set方法被调用时，trigger()函数会被执行。trigger()函数会遍历ref的依赖列表，并依次执行这些 effect。还是上面的表格，如果
refA的值发生了改变，trigger()函数会找到组件A的渲染函数, effect1 和 effect2，并重新执行它们，从而更新视图。
四、更复杂的例子：节流 (Throttle)
import { customRef } from 'vue';
function useThrottledRef(value, interval) {
let timeout;
let lastExec = 0;
return customRef((track, trigger) => {
return {
get() {
track(); // 追踪依赖
return value;
},
set(newValue) {
const now = Date.now();
const elapsed = now - lastExec;
if (!timeout) {
if (elapsed > interval) {
// 立即执行
value = newValue;
lastExec = now;
trigger(); // 触发更新
} else {
// 延迟执行
timeout = setTimeout(() => {
value = newValue;
lastExec = Date.now();
trigger(); // 触发更新
timeout = null; // 清空 timeout
}, interval - elapsed);
}
}
}
};
});
}
// 使用
import { ref, watch } from 'vue';
export default {
setup() {
const throttledValue = useThrottledRef('', 500); // 500ms 节流
const inputValue = ref('');
watch(inputValue, (newValue) => {
throttledValue.value = newValue;
});
return {
inputValue,
throttledValue,
};
},
template: `
<input v-model="inputValue" />
<p>Throttled Value: {{ throttledValue }}</p>
`
};这个例子中，useThrottledRef 实现了节流功能。 只有当距离上次执行的时间超过 interval 时，才会更新 value 并触发更新。
五、customRef 的优势
- 完全控制： 你可以完全掌控
ref的依赖追踪和更新触发，实现各种自定义的响应式行为。 - 灵活性： 适用于各种复杂的场景，比如防抖、节流、延迟更新等。
- 可复用性： 可以将自定义的
ref封装成函数，方便在不同的组件中使用。 - 提高性能： 通过控制更新频率，可以减少不必要的渲染，提高性能。 比如防抖和节流就属于性能优化手段。
六、customRef 的注意事项
track()和trigger()必须调用： 如果你忘记调用track()或trigger()， Vue 就无法正确追踪依赖或触发更新，导致视图无法正确渲染。- 避免过度使用： 虽然
customRef很强大，但也不要过度使用。 对于简单的响应式数据，直接使用ref或reactive就可以了。 - 小心内存泄漏： 在使用
setTimeout或setInterval时，要注意及时清除定时器，避免内存泄漏。 特别是在组件卸载时，一定要清除定时器。 - 确保
value的正确更新： 在set方法中，一定要确保value被正确更新，否则会导致视图显示不正确。 - 理解响应式原理： 要理解 Vue 的响应式原理，才能更好地使用
customRef。 不理解原理，很容易写出有 bug 的代码。
七、customRef 的应用场景
除了防抖和节流，customRef 还有很多其他的应用场景。
- 懒加载： 只有当组件可见时，才加载数据。
- 状态管理： 可以自定义状态管理的逻辑，比如实现撤销/重做功能。
- 动画： 可以控制动画的播放和暂停。
- 表单验证： 可以自定义表单验证的逻辑，比如实现异步验证。
- 数据缓存： 可以自定义数据缓存的逻辑，比如实现 LRU 缓存。
八、shallowRef 和 triggerRef
顺便提一下，Vue 3 还提供了 shallowRef 和 triggerRef 这两个相关的 API。
-
shallowRef: 创建一个浅层的ref。 只有当ref.value本身发生改变时，才会触发更新。 如果ref.value是一个对象，只有当对象本身被替换时，才会触发更新。 对象内部的属性改变不会触发更新。 -
triggerRef: 手动触发ref的更新。 即使ref的值没有发生改变，也可以使用triggerRef来强制触发更新。
这两个 API 通常和 customRef 配合使用，可以实现更精细的控制。
九、总结
customRef 是 Vue 3 中一个非常强大的 API，它允许我们完全掌控 ref 的依赖追踪和更新触发。 通过 customRef，我们可以实现各种自定义的响应式行为，满足各种复杂的场景需求。
但是，customRef 也需要谨慎使用。 要理解 Vue 的响应式原理，才能更好地使用 customRef，避免出现 bug。
希望今天的讲解对大家有所帮助。 下次再见！