引言

清晨的阳光洒在代码编辑器上，你的手指在键盘上跳跃。当Vue3的响应式魔法遇到特殊需求时，你会不会思考：ref()和reactive()虽然强大，但它们能满足所有场景吗？今天就让我们用生活化的视角，解开customRef的神秘面纱，看看这个看似深奥的API如何成为响应式世界里的"万能钥匙"。

第一章：初识响应式魔术师

1.1 什么是customRef？

在Vue3的魔法世界里，customRef就像个响应式变形金刚。官方说它能"创建自定义的响应式引用"，而我们更喜欢称它为"响应式套娃"——你可以把任何数据装进这个魔法盒子里，并完全掌控存取时的反应行为。

1.2 基础骨骼框架

让我们先拆开这个魔法盒看看内部构造：

import { customRef } from 'vue';

const myCustomRef = customRef((track, trigger) => ({
  get() {
    track(); // 标记依赖追踪
    return /* 自定义获取逻辑 */;
  },
  set(newValue) {
    /* 自定义更新逻辑 */
    trigger(); // 触发响应更新
  }
}));

这两个关键方法就像指挥家的双手：

  • track()：当读取值时，标记哪些组件在"窥视"这个值
  • trigger()：值变化时，通知所有"偷窥者"刷新视图

第二章：实战演练场

2.1 防抖输入神器（Vue3 + Composition API）

体验下如何用customRef制造防抖版输入框：

// 防抖版文本引用
function useDebouncedRef(value, delay = 1000) {
  let timeout;
  
  return customRef((track, trigger) => ({
    get() {
      track(); // 有人读取就标记依赖
      return value;
    },
    set(newValue) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        trigger(); // 延迟结束后再通知更新
      }, delay);
    }
  }));
}

// 组件中使用
const inputText = useDebouncedRef('初始值', 500);

使用时就像普通ref一样丝滑：

<template>
  <input v-model="inputText" />
  <p>实时值（延迟1秒）：{{ inputText }}</p>
</template>

这个小魔法让输入框不再高频刷新，界面就像坐电梯时耐心等待关门按钮生效一样自然。

2.2 本地存储小秘（Vue3 + localStorage）

让数据自动记忆到本地存储：

// 本地存储引用
function useStoredRef(key, defaultValue) {
  const storedValue = localStorage.getItem(key);
  
  return customRef((track, trigger) => ({
    get() {
      track();
      return storedValue ? JSON.parse(storedValue) : defaultValue;
    },
    set(value) {
      localStorage.setItem(key, JSON.stringify(value));
      trigger();
    }
  }));
}

// 保存用户设置
const userSettings = useStoredRef('user_settings', { theme: 'light' });

现在任何对userSettings的修改都会自动存到localStorage，就像给你的应用装了个自动备忘录。

2.3 格式转换大师（Vue3 + 数字处理）

数字显示的魔法转换：

// 金额格式化引用
function currencyRef(value) {
  return customRef((track, trigger) => ({
    get() {
      track();
      return `￥${value.toFixed(2)}`;
    },
    set(newValue) {
      value = parseFloat(newValue.replace(/[^\d.]/g, ''));
      trigger();
    }
  }));
}

// 在组件中
const price = currencyRef(100);

这样在模板里总是显示带格式的金额，修改时自动过滤非法字符，就像有个贴心的财务小助手。

第三章：魔法应用指南

3.1 何时需要施展魔法？

  • 需要精准控制触发时机的场景（如防抖、节流）
  • 需要特殊数据转换的场合（如金额/日期格式化）
  • 集成第三方库需要响应式包装时
  • 需要实现自定义缓存逻辑的存储
  • 数据验证的预处理场景

3.2 优缺点全景扫描

优势闪光点：

  • 完全掌控数据访问流程
  • 轻松实现跨API整合
  • 逻辑可复用性极强
  • 相比computed拥有更灵活的控制
  • 可以封装复杂副作用

需要留心的阴影：

  • 过度使用可能使逻辑复杂化
  • 需要手动管理依赖跟踪
  • 新手可能陷入trigger/track的死循环
  • 不适合简单响应式场景
  • 错误处理需要额外注意

第四章：魔法秘笈须知

4.1 必知生存指南

  1. 在get中必须调用track，否则依赖无法正确追踪
  2. set操作后需要适时触发trigger（尤其是异步场景）
  3. 避免在set方法内部直接修改原值而不触发更新
  4. 不要忘记清理定时器等副作用资源
  5. 多个customRef协同工作时注意执行顺序

4.2 性能优化指南

// 高效的防抖改进版
function optimizedDebouncedRef(value, delay) {
  let timeout;
  let currentValue = value;
  
  return customRef((track, trigger) => ({
    get() {
      track();
      return currentValue;
    },
    set(newValue) {
      if (newValue === currentValue) return;
      
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        currentValue = newValue;
        trigger();
      }, delay);
    }
  }));
}

这个改进版通过值对比跳过不必要的更新，就像给程序带了个智能手环，自动过滤冗余运动。

第五章：魔法师的思考

在响应式开发中，customRef就像乐高积木里的转接件。它不是每个建筑的必需品，但当遇到特殊结构的搭建需求时，它就是那把关键的钥匙。记住：强大能力的背后是更多的责任，在使用这把双刃剑时，要时刻评估实现的复杂度和可维护性。

下次当普通的响应式API不够顺手时，不妨试试这个魔法盒。当自定义的trigger在正确时刻闪烁，track精准捕捉到依赖，那种掌控感的喜悦，不正是我们编码的乐趣所在吗？