目录
一.性质
1.自定义性
2.工厂函数参数
3.track 和 trigger 函数
二.作用
1.防抖/节流
2.异步更新
3.条件性更新
4.精细控制依赖追踪
5.优化性能
三.使用
1.ts组件
2.vue.组件
四.代码
1.ts代码
2.vue代码
五.效果
在 Vue 3 中，customRef 是一个用于创建自定义响应式引用的函数。它允许开发者对依赖项的追踪和更新触发进行显式控制，从而实现更复杂的响应式逻辑。以下是 customRef 的性质与作用：
一.性质
1.自定义性
customRef 允许开发者自定义 ref 的行为，包括依赖项的追踪和更新触发。可以使用customRef来创建带有自定义验证逻辑的响应式引用，确保只有在满足特定条件时才认为输入有效。
2.工厂函数参数
customRef 接收一个工厂函数作为参数，该函数需要返回一个包含 get 和 set 方法的对象。对于一些特殊的交互逻辑，如拖拽排序、实时编辑等功能，customRef提供了足够的灵活性来实现这些复杂的交互需求。
3.track 和 trigger 函数
工厂函数接收两个参数，即 track 和 trigger 函数，分别用于收集依赖项和触发更新。
二.作用
1.防抖/节流
在用户输入或滚动事件中，频繁触发的事件可能会导致性能问题。使用customRef可以实现防抖或节流功能，从而减少不必要的计算和渲染。例如，在搜索框输入时，可以设置一个延迟时间来防止每次键盘输入都触发搜索请求。
2.异步更新
当需要根据某个异步操作的结果来更新响应式数据时，可以使用customRef来实现。例如，从服务器获取数据并更新UI元素。
3.条件性更新
在某些情况下，可能希望只有当满足特定条件时才更新视图。通过customRef，可以在set方法中添加逻辑判断，仅在条件满足时才触发更新。
4.精细控制依赖追踪
对于复杂的依赖关系，可能需要更细粒度的控制。customRef允许显式地标记依赖项和触发更新，适用于需要精确控制响应式行为的场景。
5.优化性能
通过避免不必要的响应式转换和更新，customRef可以帮助提高应用的性能。特别是在处理大量数据或高频更新的情况下。
三.使用
1.ts组件
2.vue.组件
四.代码
1.ts代码
import { customRef } from "vue";
export default function(initValue:string,delay:number){
// 使用Vue提供的customRef定义响应式数据
let timer:number
// track(跟踪)、trigger(触发)
let text = customRef((track,trigger)=>{
return {
// get何时调用？—— text被读取时
get(){
track() //告诉Vue数据text很重要，你要对text进行持续关注，一旦text变化就去更新
return initValue
},
// set何时调用？—— text被修改时
set(value){
clearTimeout(timer)
timer = setTimeout(() => {
initValue = value
trigger() //通知Vue一下数据text变化了
}, delay);
}
}
})
return {text}
}2.vue代码
<template>
<div class="app">
<h4>{{ text }}</h4>
<input type="text" v-model="text">
</div>
</template>
<script setup lang="ts" name="App">
import customRef from './customRef'
// 使用useMsgRef来定义一个响应式数据且有延迟效果
let {text} = customRef('请输入信息',3000)
</script>
<style scoped>
.app{
background-color: orange;
width: 500px;
}
input{
width: 350px;
height: 60px;
font-size: 24px;
}
h4{
font-size: 24px;
color: black;
}
</style>五.效果
输入信息三秒后，显示效果
