如何创建带有自定义防抖setter的reactive()对象（类似customRef()）

要实现带有防抖Setter的reactive对象，核心思路是拦截属性的赋值操作，延迟执行实际的响应式更新——这和customRef的原理一致，只不过customRef针对单个ref，而我们要适配对象结构的reactive。

方案1：单个属性的防抖Setter #

如果只需要给reactive对象的特定属性加防抖，可以用ref存储实际值，再在reactive对象里自定义get/set方法，把set操作包裹进防抖函数：

// 通用防抖工具函数
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 创建带防抖Setter的reactive对象
import { reactive, ref } from 'vue';

const debouncedValue = ref('初始值');
// 给值的更新加300ms防抖
const debouncedUpdate = debounce((newVal) => {
  debouncedValue.value = newVal;
}, 300);

const state = reactive({
  get input() {
    return debouncedValue.value;
  },
  set input(newVal) {
    debouncedUpdate(newVal);
  }
});

// 使用方式：直接给state.input赋值，会自动防抖
state.input = '第一次输入';
state.input = '第二次输入';
// 只有最后一次赋值会在300ms后更新debouncedValue，触发视图更新

方案2：整个对象的深层防抖 #

如果需要给整个reactive对象的所有属性（包括深层属性）加防抖，可以用watch监听对象变化，防抖后同步到真正的响应式状态：

import { reactive, watch, ref } from 'vue';

function createDebouncedReactive(initialState, delay = 300) {
  // realState是真正用于绑定视图的响应式状态
  const realState = ref({ ...initialState });
  // proxyState是用户用来修改的中间对象
  const proxyState = reactive({ ...initialState });

  // 监听proxyState的所有变化，防抖后同步到realState
  watch(
    proxyState,
    debounce((newState) => {
      // 深拷贝避免引用问题，可根据实际场景调整拷贝方式
      realState.value = JSON.parse(JSON.stringify(newState));
    }, delay),
    { deep: true } // 开启深层监听，捕获嵌套属性变化
  );

  return {
    // 供用户修改的入口
    modify: proxyState,
    // 供视图绑定的响应式状态
    state: realState
  };
}

// 使用示例
const { modify, state } = createDebouncedReactive({ count: 0, user: { name: '张三' } }, 500);

// 多次修改modify的属性，只会在最后一次修改后500ms同步到state
modify.count++;
modify.count++;
modify.user.name = '李四';

// 视图里绑定state.count、state.user.name即可

关键说明 #

• 和customRef的异同：两者都是通过拦截读写操作实现自定义逻辑，customRef针对单个值，而上述方案适配对象结构；防抖逻辑都是通过延迟执行实际更新来实现。
• 注意事项：如果对象包含复杂嵌套结构，要确保watch开启deep: true，或者根据需求选择合适的拷贝方式，避免引用导致的即时更新。

内容的提问来源于stack exchange，提问作者AHOYAHOY