在vue3项目中利用自定义ref实现防抖

一，效果展示

自定义ref实现防抖效果

 

二，代码部分

1在app.vue中

<template><input v-model="text"/><p class="result">{{text}}</p>
</template><script setup>
import {debounceRef} from './unitls/debounceRef.js'
import {ref} from 'vue'const text = debounceRef('',1000)
</script><style scoped>
</style>

2，在debounceRef.js中

import {customRef} from 'vue';
export function debounceRef(value,delay=1000){let timer;return customRef((track,trigger)=>({get(){// 依赖收集track();return value;},set(val){clearTimeout(timer);timer = setTimeout(()=>{// 派发更新value = val;trigger();},delay);},}));
}

三，代码解释

 

 1. `import {customRef} from 'vue';` 这行代码是一个 `ES6` 模块的导入语句，从 `Vue` 库中导入了 `customRef` 这个函数。在 `Vue` 中，`customRef` 是一个用于创建自定义引用类型的工具函数，它允许开发者按照自己的需求来定义响应式数据的行为，比如控制数据的读取、更新等操作逻辑，使其更灵活地适应不同的业务场景。 

2. `export function debounceRef(value,delay=1000){` 这里定义了一个名为 `debounceRef` 的函数，并通过 `export` 关键字将其导出，以便在其他模块中可以引入并使用该函数。这个函数接收两个参数： - `value`：表示要处理的初始值，这个值会和最终创建的自定义引用类型相关联，后续可以通过这个自定义引用类型进行读取和更新操作。 - `delay`：是一个可选参数，默认值为 `1000`（单位应该是毫秒），用于指定防抖的延迟时间，即当数据更新时，会延迟一定时间后才真正去执行更新操作，在此期间如果有新的更新操作触发，会重新计时延迟。

 3. `let timer;` 在 `debounceRef` 函数内部声明了一个变量 `timer`，它用于存储定时器的标识。在后续实现防抖功能时，会借助 `setTimeout` 创建定时器来控制更新操作的延迟执行，而这个变量就是用来保存定时器的返回值（以便后续能通过 `clearTimeout` 来清除定时器）。

4. `return customRef((track,trigger)=>({` 这行代码开始返回一个由 `customRef` 创建的自定义引用类型。`customRef` 函数接收一个回调函数作为参数，这个回调函数又接收两个参数 `track` 和 `trigger`，它们的作用如下： - `track`：是一个函数，用于进行依赖收集。在自定义引用类型的 `get` 方法中调用它，能够告知 `Vue` 哪些地方使用了这个引用类型的数据，以便当数据变化时，相关依赖的地方能够正确地收到更新通知并重新渲染。 - `trigger`：同样是一个函数，用于触发视图更新。在自定义引用类型的 `set` 方法中，当满足一定条件（比如防抖延迟结束后）需要通知 `Vue` 去更新使用了该数据的相关视图时，调用这个函数来触发更新操作。 整体这行代码返回的是一个包含 `get` 和 `set` 方法的对象，这两个方法定义了自定义引用类型的数据读取和更新行为。

 5. `get(){` 这是自定义引用类型对象中的 `get` 方法定义，当在模板或者其他地方读取这个自定义引用类型所关联的数据时，就会触发这个 `get` 方法。

6. `// 依赖收集` 这是一个注释，用于提示下面这行代码的作用是进行依赖收集。

7. `track();` 在 `get` 方法内调用 `track` 函数，正如前面所述，它的作用是告诉 `Vue` 在这里使用了这个自定义引用类型的数据，`Vue` 会记录这个依赖关系，以便后续数据变化时能正确地更新相关依赖的地方。

 8. `return value;` 这行代码将传入 `debounceRef` 函数的初始 `value` 返回，也就是当读取这个自定义引用类型时，实际获取到的值就是最初传入的那个 `value` 。

9. `set(val){` 这是自定义引用类型对象中的 `set` 方法定义，当尝试更新这个自定义引用类型所关联的数据时（比如通过赋值操作），就会触发这个 `set` 方法。这里的 `val` 参数就是要更新的值。

10. `clearTimeout(timer);` 在 `set` 方法中，首先调用 `clearTimeout` 函数并传入之前声明的 `timer` 变量，目的是清除可能已经存在的定时器。因为如果在延迟时间还没结束时又有新的更新操作触发，就需要先把之前的定时器清除掉，重新开始计时延迟，以实现防抖的效果。

11. `timer = setTimeout(()=>{` 这行代码创建一个新的定时器，通过 `setTimeout` 函数来实现。它接收一个箭头函数作为参数，这个箭头函数内的代码会在延迟指定的 `delay` 时间（毫秒）后执行，也就是在防抖延迟结束后执行的逻辑。

 12. `// 派发更新` 这是一个注释，提示下面代码的作用是进行更新的派发操作，也就是触发视图更新。

 13. `value = val;` 在定时器的回调函数内，将传入 `set` 方法的更新值 `val` 赋给最初传入 `debounceRef` 函数的 `value` 变量，实现了对数据的更新操作。

 14. `trigger();` 调用 `trigger` 函数，正如前面所讲，它用于通知 `Vue` 去更新使用了该自定义引用类型数据的相关视图，触发视图更新，使得数据变化能够反映到页面上。

 15. `},delay);` 这是 `setTimeout` 函数调用的结尾部分，指定了前面设置的定时器的延迟时间，也就是按照传入 `debounceRef` 函数的 `delay` 参数（默认 `1000` 毫秒）来设置延迟，确保在延迟时间结束后才执行更新操作及触发视图更新。

四，总结

总的来说，这段代码定义了一个名为 `debounceRef` 的函数，利用 `Vue` 中的 `customRef` 函数创建了一个具有防抖功能的自定义引用类型。在实际使用中，通过这个自定义引用类型进行数据读取和更新时，更新操作会按照设定的防抖延迟时间来执行，避免频繁触发更新，适用于一些例如输入框输入内容后延迟搜索等需要防抖的业务场景。