Vue3利用ref实现自定义防抖

1、使用customRef创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制

• track()：通知vue需要追踪后续内容的变化
• trigger()：通知vue重新解析模板

import { customRef } from "vue";
export function debounceRef (value, delay = 1000) {
	let timer;
	return customRef((track, trigger) => {
		return {
			get () {
				track(); // 追踪后续数据的变化
				return value;
			},
			set (val) {
				clearTimeout(timer);
				timer = setTimeout(() => {
					value = val;
					trigger(); // 重新解析模板
				}, delay)
			}
		}
	})
}

2、到页面中引用封装的防抖函数，不再使用ref定义变量

<template>
	<input v-model="text">
	<p>{{ text }}</p>
</template>

<script setup>
	import { debounceRef } from '../utlis/DebounceRef.js'
	const text = debounceRef('')
	console.log(text);
</script>

<style lang="scss" scoped>
</style>

https://www.cnblogs.com/keyeking/p/16099268.html

【Vue3】customRef及其应用场景_搬砖的猿@的博客-CSDN博客