customRef是创建一个自定义的 ref,然后显式声明对其依赖追踪和更新触发的控制方式。因为ref是直接更新的,数据修改会马上更新,而customRef可以认为控制更新的过程,比如可以利用这个api控制 空格输入限制、数据更新速度控制、违规内容、emoji输入限制等等
下面用customRef实现一个 数据更新带防抖效果的hook
import { customRef } from "vue"
export default function <T>(initValue: T, delay: number = 1000) {
let timer: number
let delayValue = customRef((track, trigger) => {
return {
get: () => {
track() //核心,告诉Vue持续关注这个值
return initValue
},
set: (value: T) => {
clearTimeout(timer)
timer = setTimeout(() => {
initValue = value
trigger() //核心,告诉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:简单记录,如有不恰当之处,欢迎交流