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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。