0Pricing
Vue Academy · Урок

Виртуальная прокрутка больших списков

vue-virtual-scroller, RecycleScroller и рендеринг с фиксированной или переменной высотой элементов

«Виртуальная прокрутка больших списков» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Проблема больших списков

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

Установка vue-virtual-scroller

Популярная библиотека — vue-virtual-scroller. Установите её и импортируйте её стили.

npm install vue-virtual-scroller

Регистрация компонента

Импортируйте RecycleScroller и его CSS, затем используйте его в компоненте.

import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

Свойство элементов

RecycleScroller принимает весь массив данных через свойство items. Он никогда не отображает все элементы сразу — только видимую область.

<RecycleScroller :items="rows" />

Размер элемента

item-size сообщает прокрутчику высоту каждой строки в пикселях. При фиксированном размере он может мгновенно вычислить видимый диапазон и общую высоту прокрутки.

<RecycleScroller
  :items="rows"
  :item-size="48"
/>

Поле ключа

Задайте каждому элементу стабильный идентификатор с помощью key-field, чтобы повторно используемые узлы правильно сопоставлялись с данными.

<RecycleScroller
  :items="rows"
  :item-size="48"
  key-field="id"
/>

Шаблон элемента в слоте по умолчанию

Используйте слот с областью видимости по умолчанию для отображения каждого видимого элемента. Слот предоставляет текущий item.

<RecycleScroller :items="rows" :item-size="48" key-field="id">
  <template v-slot="{ item }">
    <div class="row">{{ item.name }}</div>
  </template>
</RecycleScroller>

Отображаются только видимые элементы

При прокрутке прокрутчик монтирует элементы, входящие в область просмотра, и размонтирует те, которые её покидают. Число узлов DOM остаётся небольшим независимо от длины списка.

Фиксированная и переменная высота элементов

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

Обработка переменной высоты

Для переменной высоты используйте DynamicScroller вместе с DynamicScrollerItem: они измеряют отображённые элементы и корректируют их позиции.

import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";

<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
  <template v-slot="{ item, active }">
    <DynamicScrollerItem :item="item" :active="active">
      <div>{{ item.text }}</div>
    </DynamicScrollerItem>
  </template>
</DynamicScroller>

Компромиссы

Виртуальная прокрутка усложняет такие возможности, как поиск на странице (Ctrl+F), якорные ссылки на элементы за пределами области просмотра и доступность. Используйте её только для действительно больших списков.

Быстрая проверка

Что на самом деле отображает RecycleScroller в DOM?

Итоги

Виртуальная прокрутка с помощью RecycleScroller из библиотеки vue-virtual-scroller отображает только видимые элементы. Передайте данные через items, задайте item-size и key-field, а каждую строку отображайте в шаблоне v-slot. Для скорости используйте фиксированную высоту, а для переменной высоты — DynamicScroller. Применяйте этот подход только для действительно больших списков.

Часто задаваемые вопросы

Урок «Виртуальная прокрутка больших списков» бесплатный?

Да — полный текст урока «Виртуальная прокрутка больших списков» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Виртуальная прокрутка больших списков»?

vue-virtual-scroller, RecycleScroller и рендеринг с фиксированной или переменной высотой элементов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Виртуальная прокрутка больших списков»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. v-memo для мемоизации шаблонов
  2. Профилирование во вкладке производительности Vue DevTools
  3. Виртуальная прокрутка больших списков
  4. Web Workers с Vue
← Назад к Vue Academy