当用户频繁的点击请求按钮的时候,我们可以使用防抖的方式让其不会一直向后端发送请求。
customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set 适合去做防抖之类的。
点击按钮
<template>
<hr>
<div>
{
{ name }}
</div>
<hr>
<button @click="change">修改 customRef</button>
</template>
<script setup lang='ts'>
import { ref, customRef } from 'vue'
function myRef<T = any>(value: T) {
let timer:any;
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newVal) {
clearTimeout(timer)
timer = setTimeout(() => {
console.log('触发了set')
value = newVal
trigger()
},500)
}
}
})
}
const name = myRef<string>('修改前')
const change = () => {
name.value = '修改后'
}
</script>
<style scoped>
</style>