<template>
<div>
<input type="text" v-model="keyword">
<h3>{{keyword}}</h3>
</div>
</template>
<script>
import {customRef} from 'vue'
export default {
name:'TestView',
setup(){
//自定义一个ref名为:myRef
function myRef(value,delay){
let timer
//通过 customRef去实现自定义
return customRef((track,trigger)=>{
return {
get(){
// console.log(`有人读取了keyword,它的值为${value}`);
track()//告诉vue这个value值需要被“追踪”的
return value //有人读取时将值返回出去
},
set(newValue){
clearTimeout(timer)
// console.log(`有人修改了keyword,它的值为${newValue}`);
timer = setTimeout(()=>{ //添加定时器500毫秒后更新界面
value = newValue //有人修改时,修改value的值
trigger() //告诉vue更新界面
},delay)
}
}
})
}
// 自己定义的的ref
let keyword = myRef('holle',500)
// //使用vue提供的ref
// let keyword = ref('holle')
return {
keyword
}
}
}
</script>
在vue3中使用customRef创建一个防抖的ref
最新推荐文章于 2024-08-27 15:59:21 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)