利用Vue3的新API(customRef)实现防抖效果

customRef是创建一个自定义的 ref，然后显式声明对其依赖追踪和更新触发的控制方式。因为ref是直接更新的，数据修改会马上更新，而customRef可以认为控制更新的过程，比如可以利用这个api控制 空格输入限制、数据更新速度控制、违规内容、emoji输入限制等等

下面用customRef实现一个 数据更新带防抖效果的hook

import { customRef } from "vue"export default function <T>(initValue: T, delay: number = 1000) {let timer: numberlet delayValue = customRef((track, trigger) => {return {get: () => {track() //核心，告诉Vue持续关注这个值return initValue},set: (value: T) => {clearTimeout(timer)timer = setTimeout(() => {initValue = valuetrigger() //核心，告诉Vue持续关注这个值要更新了}, delay)},}})return { delayValue }
}

使用这个hook

//.vue文件
<template><div>{{ name }}</div><input v-model="name" placeholder="请输入名称">
</template><script setup lang='ts' name='Layout'>
import useDelayRef from '@/hooks/useDelayRef';
let { delayValue: name } = useDelayRef<string>('Ashley', 3000)
</script>

ps：简单记录，如有不恰当之处，欢迎交流