Vue3的customRef

百香果果ccc

已于 2023-07-12 15:16:39 修改

阅读量339

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-07-12 15:16:30 首次发布

本文链接：https://blog.youkuaiyun.com/wytccc/article/details/131682020

Vue 专栏收录该内容

48 篇文章

订阅专栏

该文章展示了如何在Vue中利用customRef自定义引用，实现输入值变化时的防抖处理。通过创建一个customRef函数，设置定时器在输入值改变后延迟更新，防止频繁触发操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

customRef可以自定义ref，可实现防抖

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

<script>
import { customRef } from 'vue';
export default {
	setup() {
		function cusRef(value) {
			return customRef((track, trigger) => {
				let timer = null;
				return {
					get() {
						track(); // 追踪，提前告诉get方法之后要修改数据
						return value;
					},
					set(newValue) {
						clearTimeout(timer);
						timer = setTimeout(() => {
							value = newValue;
							trigger();
						}, 1000);
					}
				}
			});
		}
		let keywords = cusRef('hello world'); 
		return {
			keywords
		};
	}
}
</script>