With the introduction of Composition APIS in Vue3, there are new ways to write reactive logic, namely ref and Reactive methods. In this article, I’ll show you how to create a shake-proof REF that updates the value after a specified delay. For example, a shake-proof REF would be useful if you had a search box with auto-complete that would initiate an API request after a change in query status.

Anti-shake is a good way to optimize, otherwise an API request will be made after each click.

Example repository: github.com/QuintionTan…

start

To complete this example, a new project will be created using Vite. You can run YARN Create @Vitejs /app debmentioning -search or NPM init @vitejs/app debmentioning -search, and then select the Vue template. Upon completion, the underlying project directory structure is generated.

src/App.vue

As mentioned above, you can use a shake-off reference to delay API requests when the search criteria are entered in the search box.

In the template, you have a label, input, and div that contains the keyword Query. When you’re done, you’ll see that the values are updated only after a delay. In the setup method, use the useDebouncedRef function to create a Debounce ref and pass an empty string as the initial value and the value 500,500 is the delay for debounce. In addition, there is an observer to observe the query ref. This is where you can initialize a function to perform the originating API request.

useDebouncedRef.js

Here is the implementation code for the component useDebouncedRef:

import { ref, customRef } from "vue"; /** ** @param {*} fn callback function * @param {*} delay Number of milliseconds * @param {*} immediate Whether to execute immediately * @returns */ const debounce = (fn, delay = 0, immediate = false) => { let timeout; return (... args) => { if (immediate && ! timeout) fn(... args); clearTimeout(timeout); timeout = setTimeout(() => { fn(... args); }, delay); }; }; const useDebouncedRef = (initialValue, delay, immediate) => { const state = ref(initialValue); const debouncedRef = customRef((track, trigger) => ({ get() { track(); return state.value; }, set: debounce( (value) => { state.value = value; trigger(); }, delay, immediate ), })); return debouncedRef; }; export default useDebouncedRef;Copy the code

There are two methods deounce and useDebouncedRef functions in the usedebouncedref.js file. The debounce function implements the execution of the callback after the specified delay. In addition to the callback function and delay time, it accepts a third parameter named immediate that indicates whether the callback should be executed immediately. This function can be abstracted into a generic method file and called in other parts of the application.

The useDebouncedRef method uses the ref method in the vue package to declare a new response value and the customRef method to create a customRef with explicit control over its dependency tracking and update trigger. It requires a factory function that takes track and trigger functions as arguments and should return an object with get and set.