Vue3 实现一个自带防抖的响应式值 —— CustomRef

前言

写一个防抖函数自然难不倒各位同学。但实现一个自带防抖 的响应式值大家可否听说过,本文使用vue3中的customRef来实现。

基本介绍

customRef 函数可以创建一个自定义ref,并对其依赖项跟踪和更新触发进行控制。该函数接受一个工厂函数作为参数,该工厂函数接收track和trigger两个函数作为参数。

了解过Vue3原理的同学都知道track主要负责get时进行依赖收集,trigger主要负责通知更新

废话不多说,我们直接看如何使用customRef,优雅的实现一个自带防抖的响应式值

例子

js 复制代码
<template>
  {{ value }}
  <input type="text" placeholder="请输入内容..." v-model="value" />
</template>
<script lang="ts" setup>
import { customRef, ref } from "vue";
let time: any = null;
const value = customRef((track, trigger) => {
  let defaultValue = "默认值";
  return {
    get() {
      track();
      return defaultValue;
    },
    set(newValue) {
      clearTimeout(time);
      time = setTimeout(() => {
        defaultValue = newValue;
        console.log("value update");
        trigger();
      }, 500);
    },
  };
});
</script>

上述代码中,我们使用customRef,定义了一个响应式的值,并且使用v-model进行双向绑定。其内部声明了一个闭包变量defaultValueget时调用track进行依赖收集的同时返回,set时修改defaultValue,并调用trigger进行更新,其内部也是利用setTimeOut实现防抖。

输入框进行输入的时候,value只会更新一次。

以上就是customRef实现一个自带防抖的响应式值。当然我们也可以尊重一下CompositionAPI:

js 复制代码
// useDebounceRef.ts
import {customRef} from "vue";
export function useDebounceRef(defaultValue:any,delay = 300){
    let time: any = null;
    return customRef((track, trigger) => {
        return {
          get() {
            track();
            return defaultValue;
          },
          set(newValue) {
            clearTimeout(time);
            time = setTimeout(() => {
              defaultValue = newValue;
              trigger();
            }, 500);
          },
        };
      })
}

// 组件中使用
<template>
  <div>
    {{ value }}
    <input type="text" placeholder="请输入内容..." v-model="value" />
  </div>
</template>
<script lang="ts" setup>
import { useDebounceRef } from "./useDebounceRef";
const value = useDebounceRef("默认值");
</script>
相关推荐
鹏多多1 分钟前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
fruge7 分钟前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评16 分钟前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
IT_陈寒22 分钟前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端
♡喜欢做梦23 分钟前
Spring Web MVC 入门秘籍:从概念到实践的快速通道(上)
前端·spring·mvc
Dragon Wu30 分钟前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码37 分钟前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript
namekong86 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天7 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄9 小时前
HTML 表单控件
前端·microsoft·html