Vue3：自定义customRef

一.性质

1.自定义性

2.工厂函数参数

3.track 和 trigger 函数

二.作用

1.防抖/节流

2.异步更新

3.条件性更新

4.精细控制依赖追踪

5.优化性能

三.使用

1.ts组件

vue.%E7%BB%84%E4%BB%B6-toc" style="margin-left:80px;">2.vue.组件

四.代码

1.ts代码

vue%E4%BB%A3%E7%A0%81-toc" style="margin-left:80px;">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组件

vue.%E7%BB%84%E4%BB%B6">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 = valuetrigger() //通知Vue一下数据text变化了}, delay);}}})return {text}
}

vue%E4%BB%A3%E7%A0%81">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>