一、定义
customRef自定义数据,可以灵活处理数据逻辑
二、示例
延时获取input的数据
<template>
<input v-model='keyWord' />
{{keyWord}}
</template>
<script>
import {ref} from 'vue'
export default{
setup(){
function myRef(val,delay){
let timer
return costomRef((track,trigger)=>{
return{
get(){
track()
return val
},
set(newVal){
clearSetTimeout(timer)
timer=setTimeout(()=>{
val=newVal
trigger()
},delay)
}
})
}
}
let keyWord=myRef('hello',1000)
return{
keyWord
}
}
}
</script>
定义自定义方法,返回customRef方法。
通过customRef的get()获取数据,使用track()进行更新监视;
通过customRef的set()设置数据,使用trigger()重新解析