封装防抖函数（使用v-model）

Abao

已于 2023-02-10 10:08:21 修改

阅读量372

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端开发语言

于 2023-02-08 14:52:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_72439307/article/details/128935650

vue3 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了如何在Vue.js中实现debounceRef函数，该函数结合了debounce策略和Vue的ref特性，用于在输入事件中延迟更新值，提高性能。通过customRef创建了一个自定义的响应式引用，当值改变时，会等待设定的延迟时间后才触发更新，防止频繁调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input v-model="text" />
<p>{{ text }}</p>

import { debounceRef } from './debounce'
const text = debounceRef("");

import { customRef } from "vue";
export function debounceRef(value, delay = 1000) {
  let timer;
  return customRef((track, trigger) => {
    return {
      get() {
        //依赖收集  track()
        track();
        return value;
      },
      set(val) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          // 派发更新  trigger()
          value = val;
          trigger();
        }, delay);
      },
    };
  });
}