vue-debounce-throttle/

[utterances-bot]

How to Debounce and Throttle Callbacks in Vue

How to debounce and throttle watchers and event handlers in Vue components.

https://dmitripavlutin.com/vue-debounce-throttle/

[nomnol]

Hi Dmitri. In example number 2 there is typo. create() sorry.

[panzerdp]

Hi Dmitri. In example number 2 there is typo. create() sorry.

Ooops! Fixed. :)

[nevermin9]

Hi, Dmitri, You said, that "The problem is that the options object exported from the component using export default { ... }, including the methods, are going to be reused by all the instances of the component."

[nevermin9]

Hi, Dmitri, You said, that "The problem is that the options object exported from the component using export default { ... }, including the methods, are going to be reused by all the instances of the component." It is wrong assumption. According to docs "Notice that when clicking on the buttons, each one maintains its own, separate count. That’s because each time you use a component, a new instance of it is created." I tested debounce function with reused many times component, and tests confirmed, that Vue every time create new independent instance. So, your approach to use debounce function only makes it harder to understand, but does not solve any problem

[panzerdp]

@nevermin9 You're mistaken. The options object and the methods inside it are reused between multiple instances of the same component.

Regarding data, Vue simply calls options.data() method and gets different data object for each instance.

[nevermin9]

Do you understand that, if you are right, there is no sense to use Vue?) I suggest you to check your assumption)

[jamesthomsondev]

@nevermin9 is correct. Vue does not reuse the same component instance as described in the article. That would lead to some horrible bugs.

[panzerdp]

@nevermin9 is correct. Vue does not reuse the same component instance as described in the article. That would lead to some horrible bugs.

Hey @getreworked! I'm curious, can you indicate the place in my post where I write "reuse the same component instance as described in the article"?

@nevermin9 Simply confuses the component instance (vm) and the options object (vm.$options). Please note that vm (the instance) is different than vm.$options (the options object used to create instances).

In my post I write:

The problem is that the options object exported from the component using export default { ... }, including the methods, are going to be reused by all the instances of the component.

Vue reuses the options object as a source of methods and other configuration data to construct component instances. (check the demo).

Each method found in the options object Vue binds to the component instance. But still, the method accesses the same lexical scope in multiple component instances (demo).

And here's the problem.

Vue reuses each method from the options object. That makes error prone the use of the same debounced function between different component instances because debounced function keeps its state in the lexical scope.

[jamesthomsondev]

Hey @getreworked! I'm curious, can you indicate the place in my post where I write "reuse the same component instance as described in the article"?

You're completely right! My apologies, I read that part of the article incorrectly. Your statement on the options object exported as a default is definitely correct.

[RemiC2care]

Hello, I'm trying to make it work with composition API, but I don't know how to replace the this.debouncedCallback to make it work.

Any help is welcome.

Thank you.

[panzerdp]

I'm trying to make it work with composition API, but I don't know how to replace the this.debouncedCallback to make it work.

Hi @RemiC2care! I have updated the post with how to debounce in composition API. Let me know if it's helpful.

[onekit]

Hi Dima. I also find the way how to use it if you need debounce for the Ref(). import {refDebounced} from "@vueuse/core"; const search = refDebounced(ref(''), 2000)