Vue 利用自定义ref实现防抖

利用vue提供的api【 customRef】实现函数防抖

实现

import { customRef } from 'vue'

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

使用

<script setup>
import { debounceRef } from './debounceRef'

const text = debounceRef('')
</script>

<template>
  <div class="wrapper">
    <input v-model="text" />
    <p>{{ text }}</p>
  </div>
</template>
<style>
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 30px;
}
</style>