Throttling e Deboucing em eventos com VueJS e lodash
Limitar eventos com throttling e o debouncing são ótimas maneiras de melhorar o desempenho ou reduzir a sobrecarga da rede. Enquanto Vue.js 1 costumava ter suporte nativo para estrangulamento e debouncing eventos, foi removido em Vue 2 no interesse de manter o núcleo slim. Oque é bom pois deixa o Vue 2 leve, mas em uma aplicação real essa leveza não se concretiza pois temos de adicionar mais e mais bibliotecas para termos os recursos e sermos produtivos. Como resultado, a maneira padrão de estrangulamento e debouncing eventos em Vue 2 é agora através lodash .
Lodash pode ser instalado através de yarn ou npm .
# Yarn
$ yarn add lodash
# NPM
$ npm install lodash — save
Métodos de Throttling (limitação)
Limitar seus métodos de manipulação em eventos é bastante fácil. Apenas enrole (wrap) a função que deseja chamar em lodash ‘s _.throttle função. A throttling pode ser usada para garantir que seus eventos sejam preservados, mas separados ao longo do tempo.
<template>
<button @click=”throttledMethod()”>Click me as fast as you can!</button> </template>
<script>
import _ from ‘lodash’
export default {
methods: { throttledMethod: _.throttle(() => {
console.log(‘Executa a cada 2 segundos!’) }, 2000) }
}
</script>
Método Debouncing
Debouncing essencialmente agrupa seus eventos juntos e evita que sejam executados com muita freqüência. Para usá-lo em um componente Vue, só embrulhar (wrap) a função que deseja chamar em lodash ‘s _.debounce função.
<template>
<button @click=”throttledMethod()”>Click me as fast as you can!</button>
</template>
<script>
import _ from ‘lodash’
export default {
methods: { throttledMethod: _.debounce(() => { console.log(‘só executa uma vez a cada dois segundos, no máximo!’) }, 2000) }
}
</script>
