Vue响应式数据customRef怎么写?手把手教你实现输入框防抖

风明小哥_4054

风明小哥_4054

2026-05-03

269人浏览

原创

customref 是 vue 3 提供的高级响应式 api,用于自定义 ref 的 getter 和 setter 行为;它通过手动调用 track() 和 trigger() 控制依赖追踪与更新触发,从而实现输入防抖——每次输入清除旧定时器、延迟后才赋值并触发响应式更新。

vue响应式数据customref怎么写?手把手教你实现输入框防抖

customRef 是什么,为什么用它做防抖

Vue 的 customRef 是一个高级响应式 API,允许你完全控制 ref 的 getter 和 setter 行为。它不像 ref() 那样自动追踪依赖,而是把响应式逻辑交给你自己写——这正好适合实现「输入防抖」:在用户停止输入一段时间后才更新值,同时保持模板中绑定的响应式行为不变。

核心思路:用 setTimeout 控制 setter,用 clearTimeout 清除旧任务

关键不是“延迟赋值”,而是“延迟触发响应式更新”。每次输入都重置定时器,只有最后一次输入的定时器真正执行 setter,从而触发视图更新和依赖收集。

  • 在 customRef 的工厂函数中,声明一个变量存定时器 ID(如 let timer = null)
  • getter 直接返回当前值(保持读取正常)
  • setter 接收新值后,先清除上一次定时器,再设置新定时器,在延迟后才真正赋值并调用 trigger()
  • 必须调用 track()(读时)和 trigger()(写时),否则 Vue 不知道要更新谁

手写防抖 ref 的完整代码(Vue 3 Composition API)

下面是一个可直接复用的 useDebouncedRef 工具函数:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习