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：簡單記錄，如有不恰當之處，歡迎交流