Поиск по сайту:

Регулирование и устранение дребезга событий с помощью Vue.js и lodash

Введение

Регулирование событий и устранение дребезга относятся к двум подходам к повышению производительности и потенциальному снижению нагрузки на сеть.

Хотя в Vue.js 1 раньше была встроенная поддержка событий устранения дребезга, в Vue.js 2 она была удалена.

В результате общий подход к регулированию и предотвращению дребезга событий в Vue.js 2 — использование сторонних библиотек, таких как lodash.

В этом руководстве вы примените lodash.throttle и lodash.debounce к приложению Vue.js 2.

Предпосылки

Если вы хотите следовать этой статье, вам понадобятся:

  • Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
  • Некоторое знакомство с устранением дребезга и регулированием.
  • Некоторое знакомство с Vue будет полезным, но не обязательным.
  • Некоторое знакомство с Lodash будет полезным, но не обязательным.

Это руководство было проверено с помощью Node v15.8.0, npm v7.5.4, vue v2.6.11 и lodash v4.17.20.

Настройка проекта

Для быстрой настройки проекта в этой статье рекомендуется использовать @vue/cli.

Примечание. В этой статье используется подход с использованием npx, чтобы избежать глобальной установки @vue/cli;

  1. npx @vue/cli create vue-lodash-example

После выбора предустановки (по умолчанию ([Vue 2] babel, eslint)) и менеджера пакетов (npm) перейдите в каталог только что созданного проекта;

  1. cd vue-lodash-example

Теперь вам нужно добавить lodash в проект с помощью следующей команды:

npm install lodash

Примечание. Если вам не нужно импортировать весь lodash, настройка webpack может уменьшить размер библиотеки до используемых функций. Также можно импортировать части lodash отдельно, в таких пакетах, как lodash.throttle и lodash.debounce.

Затем используйте редактор кода, чтобы создать новый файл UnmodifiedComponent.vue в каталоге components:

<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>

Затем измените App.vue, чтобы использовать новый UnmodifiedComponent:

<template>
  <div id="app">
    <UnmodifiedComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent
  }
}
</script>

Теперь вы можете запустить приложение Vue.js:

  1. npm run serve

Перейдите к localhost:8080 в веб-браузере и нажмите кнопку в веб-браузере. Консоль будет регистрировать все ваши взаимодействия. Эти события будут срабатывать сразу после каждого клика. Вы будете изменять этот метод, чтобы использовать throttle и debounce.

Методы регулирования

Затем вы примените throttle к своему приложению Vue. Регулирование можно использовать, чтобы ваши события сохранялись, но разделялись во времени.

Используйте редактор кода, чтобы скопировать свой UnmodifiedComponent и создать новый 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>

Затем измените App.vue, чтобы использовать новый 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>

Теперь вы можете запустить приложение Vue.js:

  1. npm run serve

Перейдите к localhost:8080 в веб-браузере и нажмите кнопку в веб-браузере. Консоль будет регистрировать все ваши взаимодействия. Несколько последовательных событий будут запускаться последовательно с задержкой 2000 миллисекунд (2 секунды).

Методы устранения дребезга

Затем вы примените debounce к своему приложению Vue. Debouncing, по сути, группирует ваши события вместе и предотвращает их слишком частое срабатывание.

Используйте редактор кода, чтобы скопировать свой UnmodifiedComponent и создать новый 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>

Затем измените App.vue, чтобы использовать новый 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>

Теперь вы можете запустить приложение Vue.js:

  1. npm run serve

Перейдите к localhost:8080 в веб-браузере и нажмите кнопку в веб-браузере. Консоль будет регистрировать все ваши взаимодействия. Несколько последовательных событий будут срабатывать только после последнего щелчка каждые 2000 миллисекунд (2 секунды).

Заключение

В этом руководстве вы применили lodash.throttle и lodash.debounce к приложению Vue.js 2.

Если вы хотите узнать больше о lodash, прочтите официальную документацию.

Если вы хотите узнать больше о Vue.js, посетите нашу тематическую страницу Vue.js, где вы найдете упражнения и проекты по программированию.