Vue3：自定义customRef

目录

一.性质

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>

五.效果

输入信息三秒后，显示效果