customref 是 vue.js 精确控制响应式读写、插入副作用或对接外部状态的底层 api：需手动在 get 中调用 track()、set 中调用 trigger()，典型应用包括防抖输入、localstorage 双向同步和异步数据封装。

Vue.js 自定义响应式 API 的核心是 customRef，它不是用来替代 ref 或 reactive 的常规工具，而是当你需要**精确控制读写时机、插入副作用或对接外部状态**时的底层解决方案。

customRef 的本质：手动管理依赖追踪

普通 ref 由 Vue 自动处理依赖收集与更新通知；而 customRef 把这两件事交给你决定：

• get() 中必须调用 track() —— 告诉 Vue：“当前这个副作用正在读这个值，后续变化要通知它”
• set() 中必须调用 trigger() —— 告诉 Vue：“值已更新，请刷新所有依赖它的地方”
• 漏掉 track，读取不会被监听；漏掉 trigger，视图不会更新

防抖输入：最典型的 customRef 应用

适用于搜索框、表单实时校验等场景，避免高频 setter 触发多余计算或请求：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• 在 set 里清除上一次定时器，新建延迟赋值
• 只在延迟结束后才真正更新内部 value 并 trigger
• get 仍立即返回当前缓存值，保证读取一致性

localStorage 双向同步：跨标签页响应

让 ref 值自动持久化，并响应其他浏览器标签页的变更：

• get 从 localStorage 读取，同时 track 以建立响应关联
• set 写入 localStorage，并 trigger 更新本地依赖
• 额外监听 window.storage 事件，在其他标签页修改时主动 trigger

异步数据封装：带 loading 和 cancel 的 ref

把 Promise 转成可响应式读取的状态容器：

• get 返回 { data, loading, error } 结构，首次访问触发 fetch
• set 接收新 Promise，自动取消前序请求、重置状态、触发更新
• 内部用 AbortController 实现 cancel，避免过期回调污染 state

不复杂但容易忽略

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！