Handling large lists efficiently in Vue 3

Handling large lists in Vue 3 efficiently is crucial for maintaining smooth performance and a great user experience. When dealing with thousands (or even millions) of items, a naive rendering approach can slow down or crash the application.

In this article, we’ll explore the best techniques to optimize large lists in Vue 3.

Enjoy!

Common Performance Issues with Large Lists

Before diving into solutions, let’s identify key performance problems:

• Rendering Too Many Elements: The browser struggles to handle excessive DOM nodes.
• Slow Re-renders: Frequent updates to large lists can cause slow performance.
• Inefficient Event Handling: Using events like click or mouseover on every list item can cause excessive computation.
• Memory Consumption: Storing too much data in memory can cause high RAM usage.

Now, let’s look at techniques to solve these issues.

Handling large lists efficiently in Vue

1. Use Virtual Scrolling for Large Lists

Instead of rendering the entire list, only visible items are rendered. As the user scrolls, items are dynamically loaded and unloaded. Let’s take a look at the following example with VueUse’s useVirtualList:

<script setup>
import { ref } from 'vue';
import { useVirtualList } from '@vueuse/core';

const items = ref(Array.from({ length: 100000 }, (_, i) => `Item ${i + 1}`));
const { list, containerProps, wrapperProps } = useVirtualList(items, { itemHeight: 50 });
script>

<template>
  
 v-bind="containerProps" style="height: 300px; overflow-y: auto;">
    
 v-bind="wrapperProps">
      
 v-for="item in list" :key="item.index" class="list-item">
        {{ item.data }}
      
    
  
template>

<style>
.list-item {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
style>

This efficiently displays only the items visible in the viewport.

2. Optimize v-for with key

When using v-for, always provide a unique key to help Vue optimize re-renders. Using an index as the key can cause unintended re-renders when modifying the list.

 v-for="item in items" :key="item.id">{{ item.name }}


 v-for="(item, index) in items" :key="index">{{ item.name }}

3. Use Lazy Loading for Data Fetching

Instead of loading all data at once, fetch items in small batches.

<script setup>
import { ref, onMounted } from 'vue';

const items = ref([]);
const page = ref(1);
const loading = ref(false);

const fetchMoreItems = async () => {
  if (loading.value) return;
  loading.value = true;

  // Simulating API call
  setTimeout(() => {
    for (let i = 1; i <= 20; i++) {
      items.value.push(`Item ${items.value.length + 1}`);
    }
    loading.value = false;
    page.value++;
  }, 1000);
};

onMounted(fetchMoreItems);
script>

<template>
  
    
 v-for="item in items" :key="item">{{ item }}
  
   @click="fetchMoreItems" :disabled="loading">
    Load More
  
template>

This ensures that only the necessary data is loaded as needed.

4. Debounce Input Search for Filtering Lists

When filtering a large list based on user input, debounce the search to reduce unnecessary calculations. Let’s take a look at the following example with VueUse’s useDebounceFn:

This reduces the number of filtering operations while typing.

5. Paginate Large Lists Instead of Rendering All at Once

Instead of displaying all items at once, break them into pages.

<script setup>
import { ref, computed } from 'vue';

const items = ref(Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`));
const currentPage = ref(1);
const itemsPerPage = 20;

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  return items.value.slice(start, start + itemsPerPage);
});
script>

<template>
  
    
 v-for="item in paginatedItems" :key="item">{{ item }}
  
   @click="currentPage--" :disabled="currentPage === 1">Previous
   @click="currentPage++" :disabled="currentPage * itemsPerPage >= items.length">Next
template>

Pagination improves performance by displaying only a subset of the data at a time.

Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects

Summary

Efficiently handling large lists in Vue 3 requires a combination of all the techniques mentioned above. By implementing them, you can ensure your Vue 3 applications remain fast and responsive, even with massive datasets.

Take care and see you next time!

And happy coding as always