清蒸鱼-Vue3小记

Vue3Api中的customRef

作用：它是一个用于创建自定义的响应式引用的 API。它允许你定义自己的 ref 响应式数据，并且可以手动控制依赖追踪和触发更新。也就是说通过customRef这个Api，你可以实现更灵活和高度定制化的响应式数据处理。

组成：它接受一个factory(工厂) 函数作为参数，函数包含track 以及trigger 两个方法，且返回一个对象，其中包含 get 和 set 方法来定义自定义的响应式数据。

例子：

import { customRef } from 'vue';

const myCustomRef = customRef((track, trigger) => {
  return {
    get() {
      track(); // 告知 Vue 对数据进行追踪，确保在数据变化时更新视图
      return someValue;
    },
    set(value) {
      someValue = value;
      trigger(); // 触发更新
    }
  };
});

我们通过在get方法中调用track来告知 Vue 对数据进行追踪，确保在数据变化时更新视图。在set方法中，我们设置了新的值并调用 trigger 来触发更新。

运用场景：搜索框，联想框等api请求防抖

import { customRef } from "vue";

export const useDelayedUpdate = (initValue: string, delay: number) => {
    let customData = customRef((track, trigger) => {
        let timer: number
        return {
            get() {
                track() // track 用于追踪数据的读取操作
                return initValue
            },
            set(value) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    initValue = value
                    trigger() //trigger 用于触发数据更新
                }, delay);
            }
        }
    })
    return { customData }
}

<template>
  这是一个input框<input type="text" v-model="customData" />
  <p>您输入的内容是: {{ customData }}</p>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useDelayedUpdate } from "./useSumRef";
let { customData } = useDelayedUpdate("", 1000); /*设置初始内容以及防抖时间 */
watch(customData, (val) => {
  console.log(val); /*此处通过监听最终数据进行api调用*/
});
</script>

<style scoped>
</style>

在平时为了解决防抖问题，一般都是写个公共方法（如下），然后传入需要防抖的方法和对应的方法参数，今天了解vue3这个customRef，发现有多了一种方法，可以适用于不同的场景！！

export function debounce(func: Function, delay: number) {
    let timer: NodeJS.Timeout | null = null;
    return function (this: any, ...args: any[]) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}