Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use anti-shake and throttling in Vue components". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Be careful when listening for frequently triggered events, such as user typing in the input box, window resizing, scrolling, Intersection Observer events.

These events are always triggered frequently, perhaps every few seconds. It is obviously unwise to initiate an fetch request (or similar behavior) for each event.

All we need to do is slow down the execution of the event handler. This buffer technology is anti-shake (debounce) and throttling (throttle).

1. The observer shivers.

Let's start with a simple component, and our task is to output the text that the user enters into the text box to the console:

{{value}}

Export default {data () {return {value: "",};}, watch: {value (newValue, oldValue) {console.log ("Value changed:", newValue);}

Open demo and type a few characters in the input box. Each time you enter, the value is log to the console.

We print the log by using the watcher to listen for value data properties. But if you want to add a GET request that takes value as a parameter to the viewer's callback, you shouldn't expect the request to be made too often.

Let's do some anti-shaking on the behavior of printing console logs. The core idea is to create an anti-shake function and then call it within the observer.

I chose the anti-shake implementation of 'lodash.debounce' here, but you are free to choose the implementation you like.

Let's apply the anti-shake logic to the component:

{{value}}

Import debounce from "lodash.debounce"; export default {data () {return {value: ",};}, watch: {value (... args) {this.debouncedWatch (.args);},}, created () {this.debouncedWatch = debounce ((newValue, oldValue) = > {console.log ('New value:', newValue);}, 500) }, beforeUnmount () {this.debouncedWatch.cancel ();},}

If you open this demo, you will find that from the user's point of view, it doesn't change much: you are still free to enter characters as you did in the previous demo.

But there is one difference: the log of the new input value is not printed to the console until after the last 500ms entered. This means that anti-shaking is in effect.

The implementation of the observer's anti-shaking requires only three simple steps:

In the create () hook, create an anti-shake callback and assign it to the instance: this.debouncedWatch = debounce (., 500).

Call this.debouncedWatch () in the observer callback watch.value () {...} with the correct parameter.

Finally, this.debouncedWatch.cancel () is called in the beforeUnmount () hook to cancel the execution of all anti-shake functions that are still in pending before uninstalling the component.

In the same way, you can apply anti-shake to observers of any data attribute. Then you can safely perform some heavy operations inside the anti-shake callback, such as network requests, heavy DOM operations, and so on.

two。 Event handler anti-shake

In the previous section, I showed how to use anti-shake for observers, so what about regular event handlers?

We reuse the previous example of user input data into the input box, but this time we add an event handler to the input box.

As usual, if you don't take any buffering measures, every time the value is modified, it will be printed to the console:

Export default {methods: {handler (event) {console.log ('New value:', event.target.value);}

Open the demo and type a few characters in the input box. Take a look at the console: you will find that a log is printed every time you type.

Similarly, if you can perform some heavy operations (such as network requests), it is not appropriate.

To use anti-shake for event handlers, you can refer to the following:

Import debounce from "lodash.debounce"; export default {created () {this.debouncedHandler = debounce (event = > {console.log ('New value:', event.target.value);}}, beforeUnmount () {this.debouncedHandler.cancel ();}}

Open demo and enter some characters. The component prints the log of the new input value to the console only after the last 500ms entered. Anti-shaking is working again!

The anti-shake implementation of the event handler requires only three steps:

. In the create () hook, immediately after creating the instance, assign the anti-shake callback debounce (event = > {...}, 500) to this.debouncedHandler.

Assign debouncedHandler to v-on:input in the template of the input box:

Finally, before unloading the component, call this.debouncedHandler.cancel () in the beforeUnmount () hook to cancel all function calls that are still in pending.

On the other hand, these examples apply anti-shake techniques. However, the same way can be used to create throttling functions.

3. Be careful

You may not understand: why not just create anti-shake functions in the component's method option and then call these methods as event handlers in template?

/ /... Methods: {/ / Why not? DebouncedHandler: debounce (function () {...}}, 500)} / /.

This is much easier than creating an anti-shake function on an instance object.

For example:

Import debounce from "lodash.debounce"; export default {methods: {/ / Don't do this! DebouncedHandler: debounce (function (event) {console.log ('New value:', event.target.value);}})}

Try demo.

Https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue

Instead of creating an anti-shake callback in the created () hook, the anti-shake callback is assigned to methods.debouncedHandler.

If you have tried demo, you will find that it works!

The problem is that options objects, including methods, exported by the component using export default {...} will be reused by the component instance.

If there are more than two instances of components in the web page, then all components will apply the same anti-shake function methods.debouncedHandler-this will cause anti-shake failure.

4. Summary

In Vue, anti-shake and throttling can be easily applied to observers and event handlers.

The core logic is to create an anti-shake or throttling callback in the created () hook and assign a value to the instance.

/ /... Created () {this.debouncedCallback = debounce ((... args) = > {/ / The debounced callback}, 500);}, / /.

A) then call the anti-shake function on the instance inside the observer:

/ /... Watch: {value (... args) {this.debouncedCallback (.args);},}, / /.

B) or set an event handler in template:

After that, every time you call this.debouncedCallback (. Args), even if the execution frequency is very high, the internal callback can buffer the execution.

This is the end of the introduction to "how to use anti-shake and throttling in Vue components". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.