Реализуйте эффективный виртуальный скроллинг с использованием Vue.js

Введение

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

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как асинхронно загружать и рендерить данные с использованием библиотеки axios
• Как реализовать функциональность виртуального скроллинга для рендеринга только видимых элементов списка
• Как вычислять начальный и конечный индексы видимых элементов списка на основе текущей позиции скроллинга
• Как оптимизировать производительность рендеринга с использованием буфера для рендеринга дополнительных элементов списка вне видимой области

🏆 Достижения

После завершения этого проекта вы сможете:

• Реализовать функциональность виртуального скроллинга для улучшения производительности рендеринга
• Асинхронно загружать и рендерить данные в компоненте Vue.js
• Вычислять видимые элементы списка на основе текущей позиции скроллинга
• Использовать буфер для предотвращения появления белого экрана при скроллинге

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

На этом этапе вы узнаете о структуре проекта и файлах, участвующих в функциональности входа в систему.

Структура каталога проекта выглядит следующим образом:

Начальный код для этого задания уже предоставлен. Откройте среду разработки, и структура каталога будет следующей:

├── js
│   ├── axios.min.js
│   ├── http-vue-loader.js
│   └── vue.min.js
├── data.json
├── index.html
└── virtual-scroll-list.vue

Где:

• js/axios.min.js - это файл библиотеки запросов axios.
• js/vue.min.js и js/http-vue-loader.js - это файлы, связанные с библиотекой Vue.js.
• data.json - это файл данных, который нужно запросить.
• index.html - это главная страница.
• virtual-scroll-list.vue - это файл компонента, который нужно завершить.

Нажмите кнопку Go Live в правом нижнем углу WebIDE, чтобы запустить проект.

Далее, откройте "Web 8080" в верхней части виртуальной машины и обновите страницу вручную, и вы увидите страницу. Начальный эффект - это пустой список.

Асинхронная загрузка и рендеринг данных

На этом этапе вы научитесь загружать и рендерить данные асинхронно с использованием библиотеки axios.

1. Откройте файл virtual-scroll-list.vue.
2. В хуке жизненного цикла mounted() используйте axios для отправки запроса к файлу data.json и заполнения данных list:

mounted() {
  // TODO: Completion of data requests
  axios("./data.json").then((res) => {
    this.list = res.data;
    this.totalHeight = this.list.length * this.itemHeight; // calculate the total height
  });
}

Это позволит получить данные из файла data.json и сохранить их в свойстве данных list. Свойство totalHeight также вычисляется на основе длины list и itemHeight.

После завершения этого шага начальный список должен быть отрендерен с данными, загруженными из файла data.json.

Реализация виртуального скроллинга

На этом этапе вы научитесь реализовывать функциональность виртуального скроллинга.

1. Откройте файл virtual-scroll-list.vue.
2. Реализуйте обработчик события scroll:

methods: {
  scroll(e) {
    this.start = Math.floor(e.currentTarget.scrollTop / this.itemHeight);
  },
}

Обработчик события scroll вычисляет начальный индекс (start) видимых элементов списка на основе текущей позиции скроллинга.

После завершения этого шага функциональность виртуального скроллинга должна быть реализована, и элементы списка должны рендериться только тогда, когда они видимы в области просмотра. Конечный эффект показан на следующем рисунке.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете попрактиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.