toRef的使用和特点
setup() {
const state = reactive({
gae:5,
money:100
})
//把响应式数据state对象中的某个属性age变成了ref对象了
const age = toRef(state,'age')
//把响应式对象中的某个属性使用了ref进行包装,变成了一个ref对象
const money = ref(state.money)
}
customRef的使用
自定义hook防抖的函数,value传入的数据,将来数据的类型不确定,所以,用泛型delay防抖的间隔事件,默认是200毫秒
function userDebounceRef<T>(value: T,delay = 200){
let timeOutId:number
return customRef((track,trigger)=>{
return {
get() {
//告诉Vue追踪数据
track()
return value
}
set(newValue:T) {
//清除定时器
cleatTimeout(timeOutId)
//开启定时器
timeOutId = setTimeout(()=>{
value = newVlaue
//告诉Vue更新界面
trigger()
},delay)
}
}
})
export default defineComponent({
name:'App',
setup() {
const keyword = userDebounceRef('abs',500)
}
return {
keyword,
}
})