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，它只在最近一次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>