customRef
在Vue3中可以通过使用customRef来实现自定义ref,使用如下(实现延时响应数据)
<script>
import { ref,customRef} from 'vue'
export default{
setup() {
function myRef(value,delay){
let timer
return customRef((track,trigger)=>{
return {
get(){
//追踪数据(否则响应不了)
track()
return value
},
set(newVal){
clearTimeout(timer)
value = newVal
timer = setTimeout(()=>{
//通知vue触发响应
trigger()
},delay)
}
}
})
}
let sum = myRef(0,500)
return {
sum
}
}
}
</script>
<template>
<h1>{{sum}}</h1>
<button @click="sum++">修改</button>
</template>
<style scoped>
</style>
效果如下