customRef
- 作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。
demo:实现输入数据,防抖效果
<template>
<input v-model="keyword">
<div>{{keyword}}</div>
</template>
<script>
import { customRef } from 'vue'
export default {
name: 'demo',
setup() {
// 自定义一个ref,名称为myRef
function myRef(value,delay) {
let timer
// 使用vue的customRef去配置我们的myRef,参数为一个函数,这个函数有两个参数可以直接使用
// track:
// trigger:
return customRef((track,trigger)=> {
// 要求必须返回一个对象,里面包含get和set
return {
get() {
// 通知vue追踪value的变化
track()
return value
},
set(neValue) {
clearTimeout(timer)
timer = setTimeout(()=> {
value = newValue
// 通知vue去重新解析模板
trigger()
},delay)
}
}
})
}
}
let keyword = myRef('Hello',100)
return {
keyword
}
}
</script>