vue3.0 customRef
(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数(2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger,并返回一个一个带有 get 和 set 属性的对象使用:import {customRef} from 'vue';function useDebouncedRef(value) {return customRef((t
·
(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数
(2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger,并返回一个一个带有 get 和 set 属性的对象
使用:
import {customRef} from 'vue';
function useDebouncedRef(value) {
return customRef((track, trigger) => {
return {
get() {
track() 追踪当前数据
return value
},
set(newValue) {
value=newValue
trigger() 触发响应,即更新界面
},
}
})
}
通过customRef返回的ref对象,和正常ref对象一样,通过x.value修改或读取值
类型声明:
function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
type CustomRefFactory<T> = (
track: () => void,
trigger: () => void
) => {
get: () => T
set: (value: T) => void
}
代码示例:
自定义防抖的ref:
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)
}
}
})
}
export default {
setup() {
return {
text: useDebouncedRef('hello')
}
}
}
<input v-model="text" />
更多推荐
已为社区贡献20条内容
所有评论(0)