深度剖析 customRef 源码，教你如何利用 track 和 trigger 玩转底层-Vue.js-PHP中文网

customRef是Vue 3暴露的底层响应式控制接口，需手动调用track()进行依赖收集、trigger()触发更新；其核心在于交由开发者精准控制何时被读、何时通知变更，从而实现防抖、节流等高级逻辑。

深度剖析 customref 源码，教你如何利用 track 和 trigger 玩转底层

customRef 不是“封装好的 ref”，而是 Vue 响应式系统暴露给开发者的底层控制接口。它不帮你做依赖收集或更新通知，而是把 track 和 trigger 这两个关键动作交到你手上——你决定什么时候被谁读、什么时候通知谁改。

track 和 trigger 到底在做什么？

它们不是普通函数，而是响应式系统内部的“通信信令”：

track()：告诉当前活跃的 effect（比如组件渲染函数、computed 或 watch），「我现在正在读这个值，请把我记进它的依赖列表」；
trigger()：通知所有已记录的 effect，「这个值变了，请重新执行」。

Vue 默认的 ref 在 get 时自动 track、set 时自动 trigger；customRef 则完全交由你显式调用——这正是实现防抖、节流、延迟同步、条件触发等逻辑的根基。

为什么不能只改 value，必须手动 trigger？

因为 Vue 不会监听闭包变量的变化。你在 customRef 工厂函数里用 let value = initialValue 存值，这个 value 是纯 JS 变量，Vue 对它一无所知。只有当你在 set 中调用 trigger()，系统才意识到「该通知订阅者了」。

常见误区：
❌ 在 set 里只更新 value，却不调 trigger → 视图永远不更新；
❌ 在 get 里漏掉 track → 即使后续 trigger，也没有 effect 被通知（因为没人登记过）。

一个防抖 ref 的最小可行实现

核心就三步：清旧定时器、设新定时器、定时器结束时更新值并 trigger：

function useDebouncedRef(value, delay = 300) {
  let timeout
  return customRef((track, trigger) => ({
    get() {
      track() // 每次读取都声明“我在用这个值”
      return value
    },
    set(newValue) {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        value = newValue
        trigger() // 只有这时，才真正“发布变更”
      }, delay)
    }
  }))
}

注意：这里的 value 是闭包变量，track/trigger 是 Vue 注入的钩子——你没动响应式内核，只是在它预留的插槽里填了逻辑。