vue3中封装防抖ref

1.单独的防抖函数

<script setup>
import { ref } from 'vue'
import debounce from './debounce.js'
const text = ref('')
const getValue = debounce(((e) => {
  text.value = e.target.value
  console.log(e.target.value)
}),3000)
</script>

<template>
  <div class="container">
    <input @input="getValue"/>
    <text>{{ text }}</text>
  </div>
</template>

export default function (func, delay = 1000) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.call(this, ...args);
    }, delay)
  }
}

2.使用customRef定义官方的文档也样的例题：响应式 API：进阶 | Vue.js

<script setup>
import { useDebouncedRef } from './useDebouncedRef';
const text = useDebouncedRef('hello',3000)
</script>

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

import {
  customRef
} from 'vue'
export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
          console.log(value)
        }, delay)
      }
    }
  })
}