Event throttling and debouncing refer to two approaches to improve performance and potentially lower network overhead.
While Vue.js 1 used to have native support for debouncing events, it was removed in Vue.js 2.
As a result, a common approach to throttling and debouncing events in Vue.js 2 is through third-party libraries, like lodash.
In this tutorial, you will apply lodash.throttle
and lodash.debounce
to a Vue.js 2 application.
If you would like to follow along with this article, you will need:
This tutorial was verified with Node v15.8.0, npm
v7.5.4, vue
v2.6.11, and lodash
v4.17.20.
To quickly set up the project, this article will recommend using @vue/cli
.
Note: This article will take the approach of using npx
to avoid a global installation of @vue/cli
;
- npx @vue/cli create vue-lodash-example
After selecting a preset (Default ([Vue 2] babel, eslint)) and package manager (npm), navigate to the newly created project directory;
- cd vue-lodash-example
Now, you will want to add lodash
to the project with the following command:
npm install lodash
Note: If you do not need to import all of lodash
, customizing webpack
can reduce the size of the library to the functions that are utilized. It is also possible to import parts of lodash
separately, in packages like lodash.throttle
and lodash.debounce
.
Next, use your code editor to create a new UnmodifiedComponent.vue
file in the components
directory:
<template>
<div>
<h1>Unmodified Events</h1>
<button @click="unmodifiedMethod()">Click this button as fast as you can!</button>
</div>
</template>
<script>
export default {
methods: {
unmodifiedMethod: () => {
console.log('Button clicked!')
}
}
}
</script>
Next, modify App.vue
to use the new UnmodifiedComponent
:
<template>
<div id="app">
<UnmodifiedComponent/>
</div>
</template>
<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
export default {
name: 'App',
components: {
UnmodifiedComponent
}
}
</script>
Now you can run the Vue.js application:
- npm run serve
Navigate to localhost:8080
in your web browser and interact with the button in your web browser. The console will log all of your interactions. These events will fire immediately with every click. You will be modifying this method to use throttle
and debounce
.
Next, you will apply throttle
to your Vue application. Throttling can be used to ensure your events are preserved but separated over time.
Use your code editor to copy your UnmodifiedComponent
and create a new ThrottleComponent
:
<template>
<div>
<h1>Throttled Events</h1>
<button @click="throttleMethod()">Click this button as fast as you can!</button>
</div>
</template>
<script>
import _ from 'lodash'
export default {
methods: {
throttleMethod: _.throttle(() => {
console.log('Throttle button clicked!')
}, 2000)
}
}
</script>
Next, modify App.vue
to use the new ThrottleComponent
:
<template>
<div id="app">
<UnmodifiedComponent/>
<ThrottleComponent/>
</div>
</template>
<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'
export default {
name: 'App',
components: {
UnmodifiedComponent,
ThrottleComponent
}
}
</script>
Now you can run the Vue.js application:
- npm run serve
Navigate to localhost:8080
in your web browser and interact with the button in your web browser. The console will log all of your interactions. Multiple sequential events will fire consistently with a delay of 2000 milliseconds (2 seconds).
Next, you will apply debounce
to your Vue application. Debouncing essentially groups your events together and keeps them from being fired too often.
Use your code editor to copy your UnmodifiedComponent
and create a new DebounceComponent
:
<template>
<div>
<h1>Debounced Events</h1>
<button @click="debounceMethod()">Click this button as fast as you can!</button>
</div>
</template>
<script>
import _ from 'lodash'
export default {
methods: {
debounceMethod: _.debounce(() => {
console.log('Debounce button clicked!')
}, 2000)
}
}
</script>
Next, modify App.vue
to use the new DebounceComponent
:
<template>
<div id="app">
<UnmodifiedComponent/>
<ThrottleComponent/>
<DebounceComponent/>
</div>
</template>
<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'
import DebounceComponent from './components/DebounceComponent.vue'
export default {
name: 'App',
components: {
UnmodifiedComponent,
ThrottleComponent,
DebounceComponent
}
}
</script>
Now you can run the Vue.js application:
- npm run serve
Navigate to localhost:8080
in your web browser and interact with the button in your web browser. The console will log all of your interactions. Multiple sequential events will only fire after the last click once every 2000 milliseconds (2 seconds).
In this tutorial, you applied lodash.throttle
and lodash.debounce
to a Vue.js 2 application.
If you’d like to learn more about lodash
, read the the official documentation.
If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
And if you need to access the component instance inside the throttled function, then simply dont use an arrow function:
Linus Borg, a core member of the Vuejs team, recommends creating debounced methods in created() [1], to avoid wonky behavior across instances.
In this case, it would look like so:
1: https://forum.vuejs.org/t/lodash-debounce-not-working-when-placed-inside-a-method/86334/5
If you only need the
debounce
function, you can import it by itself: