Vue 响应式 API 中的 customRef：自定义 Ref 实现-Vue.js-PHP中文网

customref 用于完全控制 ref 的 getter 和 setter 行为，适用于防抖、localstorage 同步、异步缓存等场景；需手动调用 track() 和 trigger()，避免无限循环与响应丢失。

vue 响应式 api 中的 customref：自定义 ref 实现

customRef 是 Vue 3 响应式系统中一个灵活但较少被直接使用的 API，它允许你**完全控制 ref 的 getter 和 setter 行为**，从而实现更精细的响应式逻辑，比如防抖、节流、惰性求值、缓存、或与外部状态（如 localStorage、Web Worker）同步。

什么时候该用 customRef？

当你发现 ref 或 computed 无法满足特定响应式需求时，例如：

希望某个值在修改后延迟更新（如输入框防抖）
需要读取时才计算、且结果可缓存（避免重复开销）
想让 ref 自动与本地存储保持双向同步
要拦截并校验每次赋值（类似受控组件 + 自定义验证）

customRef 的基本结构

它接收一个工厂函数，该函数返回一个包含 get 和 set 方法的对象：

（注意：必须调用 track() 和 trigger() 手动通知依赖更新）

```js
import { customRef } from 'vue'

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track() // 告诉 Vue：当前副作用依赖这个 ref
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger() // 告诉 Vue：值变了，更新依赖
        }, delay)
      }
    }
  })
}
```