custom:定做的
customRef作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。
输入框,延迟呈现——》实现防抖效果,延迟显示
<template>
<input type="text" v-model="keyWord">
<h3>{{keyWord}}</h3>
</template>
实时显示
import {ref} from 'vue'
export default {
name: 'App',
setup() {
let keyWord = ref('hello') //使用Vue提供的ref
return {keyWord}
}
}
实现ref效果——显示//使用程序员自定义的ref,借助API customRef
import {ref,customRef} from 'vue'
export default {
name: 'App',
setup() {
//自定义一个ref——名为:myRef
function myRef(value){
return customRef((track,trigger)=>{//return将自定义ref的传出去
return {//自定义的语法必须返回对象
get(){
console.log(`有人从myRef这个容器中读取数据了,我把${value}给他了`)
track() //通知Vue追踪value的变化(提前和get商量一下,让他认为这个value是有用的)
//初始化不使用追踪,改的时候使用
return value
},
set(newValue){
console.log(`有人把myRef这个容器中数据改为了:${newValue}`)
value = newValue
trigger() //通知Vue去重新解析模板
},
}
})
}
let keyWord = myRef('hello',500) //使用程序员自定义的ref
return {keyWord}
}
}
实现延时:
//自定义一个ref——名为:myRef
function myRef(value,delay){
let timer
return customRef((track,trigger)=>{
return {
get(){
console.log(`有人从myRef这个容器中读取数据了,我把${value}给他了`)
track() //通知Vue追踪value的变化(提前和get商量一下,让他认为这个value是有用的)
return value
},
set(newValue){
console.log(`有人把myRef这个容器中数据改为了:${newValue}`)
clearTimeout(timer)//清除上一次的定时器
timer = setTimeout(()=>{
value = newValue
trigger() //通知Vue去重新解析模板
},delay)
},
}
})
}