toRef的使用和特点

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,
}
})