揭秘Vue3API-customRef之仿抖Ref

引言

customRef()：创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式

类型

function customRef<T>(factory: CustomRefFactory<T>): Ref<T>

type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T
  set: (value: T) => void
}

说明

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权

防抖Ref实现

第一步：创建一个debounceRef.js文件

// 引入customRef Api
import { customRef } from "vue"

export function debounceRef(value, delay = 1000) {
    let timer = null;
    return customRef((track, trigger) => ({
        get() {
            track();
            return value;
        },
        set(newVal) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                value = newVal;
                trigger();
            }, delay)
        }
    }))
}

第二步：在页面中导入方法来实现

// 引入方法
import { debounceRef } from "./debounceRef.js";

// 创建响应式变量
const searchValue = debounceRef("", 600);

<input type="text" v-model="searchValue" value="" placeholder="搜索">

总结

通过使用vue3的Api-customRef()可以创建响应式自定义的ref，并能通过接收参数的track()和trigger()来触发响应式操作

注意

这种方式在element-Plus el-input输入框中不适用。

issues: github.com/element-plu…