基于vue3.0的防抖（ref原理）

1.新建 debounceRef.js文件

import { customRef } from 'vue'

export function debounceRef (value, duration) {
  let timer
  return customRef(() => {
    return {
      set () {
        track();
        return value
      },

      set (val) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          trigger()
          val = val
        }, duration);
      }
    }
  })
}

2. 在vue页面中引入使用

<template>
  <div>
    <div class="box">
      <input v-model="text" type="text" />
      <p>{{ text }}</p>
    </div>
  </div>
</template>

<script setup>
import { debounceRef } from "./debounceRef";
const text = debounceRef("", 1000);
</script>

<style lang="scss" scoped>
.box {
  width: 600px;
  height: 600px;
}
</style>