// 引入vue指定ref的函数
import {
    
     customRef } from "vue";
/**
 * 使用 vue ref 自定义数据响应以及实现防抖
 * @param value 赋值 任意类型
 * @param delay 时间 Date
 * @returns function
 */
export const debounceRef = (value: any, delay = 1000) => {
    
    
    let timer: NodeJS.Timer;
    return customRef((tiack, trigger) => {
    
    
        return {
    
    
            get() {
    
    
                tiack();
                return value;
            },
            set(val) {
    
    
                clearTimeout(timer);
                timer = setTimeout(() =>{
    
    
                    value = val;
                    trigger();
                }, delay);
            }
        }
    });
};

在组件中使用 .vue

<script setup lang="ts">
// 引入自定义的方法
import {
    
     debounceRef } from '@/utils/tools';
// 绑定
const value = debounceRef(null);
</script>

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