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

Question

[Александр Макаров]

Например, есть 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);
  }
}

Answer 1

[Влад Хеллсайт]

Если вы не знали, но Vue.js вешает один обработчик на уровень выше для цикла, а это означает что используется делегирование. У меня таблица которая подгружается через AJAX часто её количество превышает 5000 строк, проблем с производительность не возникало.

Comments

[Александр Макаров]

Вот об этом и был мой вопрос, в этом я и хотел убедиться!
Спасибо!

[Андрей]

Пробуждаю древнее зло, но стало интересно - где именно вы нашли информацию о том, что vue самостоятельно использует делегирование?

Answer 2

[Negwereth]

Конечно, есть.
Что один обработчик, а что 100.

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

Comments

[Александр Макаров]

Спасибо

[Константин Китманов]

А разве все эти фреймворки не делают делегирование автоматически?

Answer 3

[ой всё]

судя по всему никак
вам придется писать обработчики на каждое событие

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