AlexReal
@AlexReal
Супермен

Как обрабатывать большое количество событий во vue.js?

Например, есть ul, в котором 100 тегов li.
Есть ли разница с точки зрения производительности:

1.
<ul @click="doSomething">
<li v-for="n in somewhere">{{ n }}</li>...</ul>

methods: {
  doSomething: function(e) {
    if (e.target.tagName.toLoweCase() == 'li') console.log(e.target.textContent);
  }
}

или
2.
<ul>
<li v-for="n in somewhere"  @click="doSomething">{{ n }}</li>...</ul>

methods: {
  doSomething: function(e) {
    console.log(e.target.textContent);
  }
}
  • Вопрос задан
  • 693 просмотра
Решения вопроса 1
Negezor
@Negezor
Senior Shaurma Developer
Если вы не знали, но Vue.js вешает один обработчик на уровень выше для цикла, а это означает что используется делегирование. У меня таблица которая подгружается через AJAX часто её количество превышает 5000 строк, проблем с производительность не возникало.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Negwereth
@Negwereth
lvivcss.com.ua
Конечно, есть.
Что один обработчик, а что 100.

Вот первый вариант называется "делегирование" и рекомендуется к использованию.
Ответ написан
@AnneSmith
самая ленивая
судя по всему никак
вам придется писать обработчики на каждое событие

а если значение или действие зависит от больше чем от одного события, то у вас начнутся бесконечные макароны
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы