利用vue提供的api【
customRef】实现函数防抖
实现
import { customRef } from 'vue'
export function debounceRef(value, delay = 500) {
let timer
return customRef((track, trigger) => {
return {
get() {
// 依赖收集 track()
track()
return value
},
set(val) {
clearTimeout(timer)
// 派发更新 trigger()
timer = setTimeout(() => {
value = val
trigger()
}, delay)
},
}
})
}
使用
<script setup>
import { debounceRef } from './debounceRef'
const text = debounceRef('')
</script>
<template>
<div class="wrapper">
<input v-model="text" />
<p>{{ text }}</p>
</div>
</template>
<style>
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: red;
font-size: 30px;
}
</style>