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函数作为参数,并应该返回一个带有
一般来说,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>