使用ref()定义响应式数据：
<template><div><div>{{ inputValue }}</div><input type="text" v-model="inputValue"></div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputValue = ref('hello')
</script>
使用Vue提供的默认ref()定义响应式数据，当数据发生变化时，Vue 的响应式系统会自动检测到变化，并立即更新相关的页面部分。
现在，实现如下图所示的需求：当在输入框输入123时，输入结束1秒后，页面才更新。
<input type="text" v-model="inputValue">将输入框与inputValue进行双向绑定，当用户在输入框中输入数字1，input框的数据瞬间就改变了，在页面上用作展示的<div>{{ inputValue }}</div>也就更新了。
使用ref()定义响应式数据，数据变了，页面就会立即更新。它无法实现数据变了，等开发者做个 什么什么需求 再来改变页面渲染。
使用Vue提供的customRef()来实现需求。
customRef()
customRef()创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
类型
function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
type CustomRefFactory<T> = (track: () => void,trigger: () => void
) => {get: () => Tset: (value: T) => void
}
customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。
- 一般来说，
track()应该在get()方法中调用，而trigger()应该在set()中调用。 get()在数据读取时调用，用于返回值。set()在数据被修改时调用，用于更新值并触发更新。track()：用于通知 Vue 的响应式系统，当前数据很重要，要持续跟踪数据，一旦数据发生变化，立即更新trigger()：用于通知 Vue 的响应式系统，数据发生了变化。
通过自定义响应式引用，可以控制何时触发依赖追踪（track）和响应式更新（trigger）。这对于实现一些特殊的逻辑或优化性能非常有用。
使用customRef()实现函数防抖
使用customRef()实现需求：当在输入框输入123时，输入结束1秒后，页面才更新。
这个功能其实就是函数防抖。
创建一个防抖ref，只在最近一次 set 调用后的一段固定间隔后再调用：
<template><div><div>{{ inputValue }}</div><input type="text" v-model="inputValue"></div>
</template>
<script setup lang="ts">
import { customRef } from 'vue';
// 使用customRef定义响应式数据
let value = 'hello'
let timer:number
// track-跟踪 trigger-触发
const inputValue = customRef((track, trigger) => {return {// get：数据被读取时调用get() {track() // 通知响应式系统正在读取数据，告诉响应式系统数据很重要，要对数据保持持续跟踪，一旦数据发生变化，就更新return value},// set：数据被修改时调用set(newValue) {if(timer){clearTimeout(timer)}timer = setTimeout(() => {value = newValuetrigger() // 通知响应式系统数据已发生变化}, 1000) }}
})
</script>
把这个方法封装成一个hooks：
import { customRef } from 'vue';export default function useDataRef(initValue: string, delayTime: number) {let value = initValuelet timer: numberreturn customRef((track, trigger) => {return {// get：数据被读取时调用get() {track() // 通知响应式系统正在读取数据，告诉响应式系统数据很重要，要对数据保持持续跟踪，一旦数据发生变化，就更新return value},// set：数据被修改时调用set(newValue) {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {value = newValuetrigger() // 通知响应式系统数据已发生变化}, delayTime)}}})
}
使用：
<template><div><div>{{ inputValue }}</div><input type="text" v-model="inputValue"></div>
</template>
<script setup lang="ts">
import useDataRef from '@/hooks/useDataRef'
const inputValue = useDataRef('hello', 2000)
</script>
