作用:
(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数
(2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger,并返回一个一个带有 get 和 set 属性的对象
<template>
<div id="nav">
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
</div>
</template>
<script lang="ts">
import {defineComponent,ref,customRef} from "vue"
// 自定义hook防抖函数
// value传入的数据,将来数据类型不确定,所以用泛型。delay防抖的间隔时间,默认200ms
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)
// 开启计时器
setTimeout(()=> {
value = newValue;
// 告诉Vue更新界面
trigger()
},delay)
}
}
})
}
export default (defineComponent)({
setup() {
const msg = useDebouncedRef('hhh',500);
return {
msg
}
}
})
</script>
<style>
</style>
track()告诉vue追踪数据
trigger()告诉vue更新界面