Implementando Virtual Scrolling Eficiente com Vue.js

Introdução

Neste projeto, você aprenderá como implementar uma lista de rolagem virtual usando Vue.js. A rolagem virtual é uma técnica que renderiza apenas a área visível de um grande conjunto de dados, em vez de renderizar ou renderizar parcialmente os dados na área não visível. Isso alcança um desempenho de renderização extremamente alto e é adequado para renderizar um grande número de dados com um volume pequeno.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como carregar e renderizar dados de forma assíncrona usando a biblioteca axios
• Como implementar a funcionalidade de rolagem virtual para renderizar apenas os itens da lista visíveis
• Como calcular os índices inicial e final dos itens da lista visíveis com base na posição atual da rolagem
• Como otimizar o desempenho da renderização usando um buffer para renderizar itens de lista adicionais fora da área visível

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Implementar a funcionalidade de rolagem virtual para melhorar o desempenho da renderização
• Carregar e renderizar dados de forma assíncrona em um componente Vue.js
• Calcular os itens da lista visíveis com base na posição atual da rolagem
• Usar um buffer para evitar uma tela branca durante a rolagem

Configurar a Estrutura do Projeto

Nesta etapa, você aprenderá sobre a estrutura do projeto e os arquivos envolvidos na funcionalidade de login.

A estrutura do diretório do projeto é a seguinte:

O código inicial para esta questão já foi fornecido. Abra o ambiente de codificação, e a estrutura do diretório é a seguinte:

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

Onde:

• js/axios.min.js é o arquivo da biblioteca de requisição axios.
• js/vue.min.js e js/http-vue-loader.js são arquivos relacionados à biblioteca Vue.js.
• data.json é o arquivo de dados a ser requisitado.
• index.html é a página principal.
• virtual-scroll-list.vue é o arquivo de componente que precisa ser completado.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página. O efeito inicial é uma caixa de lista vazia.

Carregamento e Renderização Assíncrona de Dados

Nesta etapa, você aprenderá como carregar e renderizar dados de forma assíncrona usando a biblioteca axios.

1. Abra o arquivo virtual-scroll-list.vue.
2. No hook de ciclo de vida mounted(), use axios para fazer uma requisição ao arquivo data.json e preencher os dados da list:

mounted() {
  // TODO: Conclusão das requisições de dados
  axios("./data.json").then((res) => {
    this.list = res.data;
    this.totalHeight = this.list.length * this.itemHeight; // calcula a altura total
  });
}

Isso buscará os dados do arquivo data.json e os armazenará na propriedade de dados list. A propriedade totalHeight também é calculada com base no comprimento da list e no itemHeight.

Após concluir esta etapa, a lista inicial deve ser renderizada com os dados carregados do arquivo data.json.

Implementando Virtual Scrolling

Nesta etapa, você aprenderá como implementar a funcionalidade de virtual scrolling.

1. Abra o arquivo virtual-scroll-list.vue.
2. Implemente o manipulador de eventos scroll:

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

O manipulador de eventos scroll calcula o índice start dos itens da lista visíveis com base na posição atual da rolagem.

Após concluir esta etapa, a funcionalidade de virtual scrolling deve ser implementada, e os itens da lista devem ser renderizados apenas quando estiverem visíveis na viewport. O efeito final é mostrado na figura a seguir.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.