在vue3项目中利用自界说ref实现防抖

一，结果展示

     自界说ref实现防抖结果
   
二，代码部门

1在app.vue中

1. <template>
2.   <input v-model="text"/>
3.   <p class="result">{{text}}</p>
4. </template>
7. <script setup>
8. import {debounceRef} from './unitls/debounceRef.js'
9. import {ref} from 'vue'
11. const text = debounceRef('',1000)
12. </script>
14. <style scoped>
15. </style>

复制代码

2，在debounceRef.js中

1. import {customRef} from 'vue';
2. export function debounceRef(value,delay=1000){
3.   let timer;
4. return customRef((track,trigger)=>({
5.     get(){
6.       // 依赖收集
7.       track();
8.       return value;
9.     },
10.     set(val){
11.       clearTimeout(timer);
12.     timer = setTimeout(()=>{
13.          // 派发更新
14.       value = val;
15.    
16.        trigger();
17.       
18.     },delay);
19.      
20.     },
21.   }));
22. }

复制代码

三，代码表明

 
 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` 函数创建了一个具有防抖功能的自界说引用类型。在实际利用中，通过这个自界说引用类型进行数据读取和更新时，更新操纵会按照设定的防抖耽误时间来执行，避免频仍触发更新，实用于一些例如输入框输入内容后耽误搜索等必要防抖的业务场景。
 
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。