【Vue3】customRef自定义ref

前言

某些场景下，ref数据在触发响应式之前，需要有额外的操作，此时就需要自定义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：追踪数据，一旦发现改变，通知修改。
trigger：修改数据。

通常情况，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。

示例

防抖

import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

使用

<script setup>
import { useDebouncedRef } from './debouncedRef'
const text = useDebouncedRef('hello')
</script>

<template>
  <input v-model="text" />
</template>