vue3使用自定义customRef实现防抖

组件

<template>
	<input type="text" v-model="keyWord" />
	<h3>{{ keyWord }}</h3>
</template>

<script>
export default {
	name: 'App'
}
</script>
<script setup>
//导入防抖函数
import { debouncesRef } from './debounces'
//使用自定义的Ref
const keyWord = debouncesRef('')
</script>

使用vue3 中customRef

import { customRef } from 'vue'

export function debouncesRef(value, delay = 1000) {
	let timer
	return customRef((track, trigger) => {
		return {
			get() {
				track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
				return value
			},
			set(newValue) {
				clearTimeout(timer)
				timer = setTimeout(() => {
					value = newValue
					trigger() //通知Vue去重新解析模板
				}, delay)
			}
		}
	})
}