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

前言

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

使用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