-
概念
按照文档中的说明：customRef 可以用来创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和trigger函数作为参数，并且应该返回一个带有 get 和 set 的对象。
其实大致意思就是，我们可以按照自己的业务需求去自定义封装一个ref对象，在其内部可以使用get和 set去跟踪或更新数据，有点计算属性内味了哈~ -
作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。文章来源：https://www.toymoban.com/news/detail-531639.html
-
实现防抖效果：文章来源地址https://www.toymoban.com/news/detail-531639.html
<template>
<input type="text" v-model="keyWord">
<h3>{{keyWord}}</h3>
</template>
<script>
import {ref,customRef} from 'vue'
export default {
name: 'App',
setup() {
//自定义一个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)
},
}
})
}
// let keyWord = ref('hello') //使用Vue提供的ref
let keyWord = myRef('hello',500) //使用程序员自定义的ref
return {keyWord}
}
}
</script>
到了这里，关于[Vue3]学习笔记-customRef的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[Vue]Vue3学习笔记(尚硅谷)](https://imgs.yssmx.com/Uploads/2024/02/790916-1.png)
