* 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。 * 需求: 使用 customRef 实现 debounce 的示例。 **示例1：`ref`演示实时数据呈现** ```html <template> <!-- 2. 将input的value与keyword进行绑定 --> <input type="text" v-model="keyword" /> <h3>{{ keyword }}</h3> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { //1. 创建一个ref响应式数据 const keyword = ref('abc') return { keyword, } }, }) </script> ``` 效果如下，当改变 input 中的值时，界面是实时的更新数据的。  <br/> **示例2：使用 customRef 实现 debounce 的示例** ```html <template> <!-- 3. 将input的value与keyword绑定 --> <input type="text" v-model="keyword" /> <h3>{{ keyword }}</h3> </template> <script lang="ts"> import { customRef, defineComponent, ref } from 'vue' //1. 调用 customRef 自定义hook防抖的函数 function useDebouncedRef < T > (value: T, delay = 200) { //存储定时器的id变量 let timeOutId: number return customRef((track, trigger) => { return { get() { //告诉vue追踪数据 track() return value }, set(newValue: T) { //清理定时器 clearTimeout(timeOutId) //开启定时器 timeOutId = setTimeout(() => { value = newValue //告诉vue更新界面 trigger() }, delay) }, } }) } export default defineComponent({ setup() { //2. 调用自定义的hook函数 const keyword = useDebouncedRef('agc', 500) return { keyword, } }, }) </script> ``` 效果如下，当改变 input 中的值时，界面需要等待指定的时间才显示到界面上。