Vue.js 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() 内部调用。但是，您可以完全控制何时调用它们，或者是否应该调用它们。

示例

创建一个 debounced 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>

在操场上试试

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 customRef()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。