vue3 customRef 实现搜索节流/防抖

vue3 customRef(自定义ref) 实现节流/防抖

//html
<template>
  <div style="background: #e1e1e1; padding: 20px; border: 2px solid red">
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg" />
  </div>
</template>

<script lang="ts" setup>
import useMsgRef from '@/hooks/useMsgRef.ts'
// 使用useMsgRef定义响应式数据且有延迟效果
let { msg } = useMsgRef('hello world', 2000)

</script>

封装hooks
//封装防抖函数

import { customRef } from 'vue'
export default function useMsgRef(initValue: string, delay: number) {
    //使用vue提供的customRef定义响应式数据
    let timers: number
    //track(跟踪)，trigger(触发)
    let msg = customRef((track, trigger) => {
        return {
            get() { // get何时调用？--msg被读取时调用
                track() //告诉vue数据msg很重要，要对msg持续关注，一旦msg变化了就更新（一旦msg被修改，就重新触发get）
                return initValue
            },
            set(value) {
                // set何时调用？--msg被修改时调用
                clearTimeout(timers)
                timers = setTimeout(() => {
                    initValue = value
                    console.log(value, 'set')
                    trigger() //通知vue数据msg变化了
                }, delay)
            },
        }
    })
    return { msg }
}

尚硅谷学习笔记