Vue3 组合式Api之customRef实现防抖功能

原创已于 2022-04-20 22:06:57 修改 · 621 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-20 22:06:00 首次发布

Vue3学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue3中利用customRef实现防抖功能的原理和实践。防抖技术用于限制频繁触发的事件，确保在设定的时间间隔内只执行一次。文中展示了如何结合customRef和v-model来创建一个具有防抖效果的功能，并提供了效果展示。

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

前言

什么是防抖？
防抖就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔，如果触发间隔小于设定的间隔，则清除原来的定时，重新设定新的定时；如果触发间隔大于设定间隔，则保留原来的定时，并设置新的定时；
防抖的结果就是频繁的触发转变为触发一次。

使用customRef实现防抖

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。该函数有两个参数： track 和 trigger 。
使用自定义 ref 通过 v-model 实现防抖示例：

<template>
  <input type="text" v-model="name" />
  <h3>{{ name }}</h3>
</template>

<script>
import { defineComponent, customRef } from 'vue'

export default defineComponent({
  setup() {
    // const name = ref('hello')    // 此时ref是Vue提供的ref
    // 自定义的ref  名为：myRef（ref本质就是一个函数）
    function myRef(value, delay) {
      let timer
      return customRef((track, trigger) => {
        return {
          get() {
            // 通知vue追踪数据value的变化
            track()
            return value
          },
          set(newValue) {
            clearTimeout(timer)
            timer = setTimeout(() => {
              value = newValue
              // 通知vue去重新解析模版
              trigger()
            }, delay)
          },
        }
      })
    }
    const name = myRef('', 500)
    return {
      name
    }
  },
})
</script>

效果展示：

1650460871249670