• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • customRef()

    创建一个自定义的ref,显式控制其依赖跟踪和更新触发。

    类型

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


    细节

    customRef()需要一个工厂函数,它接收tracktrigger函数作为参数,并应该返回一个带有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>
    

    上篇:triggerRef()

    下篇:toRaw()