Комментарий пользователя
Здравствуйте! У меня большой динамический список, при перестановках UI тормозит и внутреннее состояние элементов иногда «перескакивает». Как оптимально рендерить такие списки в Vue?
Ответ специалиста
Здравствуйте! Первое и критичное — всегда использовать стабильный уникальный :key (обычно id). Использование индекса приводит к «перескакиванию» состояния и лишним DOM-операциям.
Для больших наборов применяйте виртуализацию (например, vue-virtual-scroller) чтобы не рендерить все DOM-элементы, а также выносите тяжелые элементы в отдельные компоненты, чтобы уменьшить работу родителя.
Пример корректного v-for:
<template>
<ul>
<li v-for="item in items" :key="item.id">
<ItemRow :item="item" />
</li>
</ul>
</template>
Если items пересоздается по ссылке без надобности — это тоже губит оптимизации, поэтому старайтесь модифицировать массив минимально. Для очень больших списков используйте виртуальный скрол и давайте ItemRow управлять своим локальным состоянием, чтобы переотрисовка родителя не сказывалась на локальных input’ах.
Больше полезных материалов и новости из мира IT — в рассылке ниже.
