vue3customRef

1、概念

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。

2、代码示例

需求

使用customRef实现debounce的示例。

<template> <h2>CustomRef的使用{ keyword }} customRef, defineComponent, ref } from "vue"; // 自定义hook防抖的函数 // value传入的数据,将来数据的类型不确定,所以,用泛型,delay防抖的间隔时间.默认是200毫秒 function useDebouncedRef<T>(value: T, delay = 200) { // 准备一个存储定时器的id的变量 let timeOutId: number; return customRef((track, trigger) => { return { // 返回数据的 get() { // 告诉Vue追踪数据 track(); return value; }, // 设置数据的 set(newValue: T) { // 清理定时器 clearTimeout(timeOutId); // 开启定时器 timeOutId = setTimeout(() => { value = newValue; // 告诉Vue更新界面 trigger(); }, delay); }, }; }); } export default defineComponent({ name: "App", setup() { // const keyword = ref('abc') const keyword = useDebouncedRef("abc", 500); return { keyword, }; }, });