Improve performance on large lists in Vue.js

Alex Jover Morales

Alex Jover Morales

Jan 13, 2019
2 min read
Share on Twitter or LinkedIn

Hi there! And welcome to the very first VueDose tip! I'm really stocked to start this adventure on VueDose and help devs like you learn some badass tricks.

VueDose's tips are going to be very concise, and that's the format I believe people find more useful. So let's go straight to the point.

Usually we have the need of fetching a list of objects, say users, items, articles, whatever...

And sometimes, we don't even need to modify them, just to display them or having them in our global state (a.k.a. Vuex). A simple code for fetching that list would be something like:

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = users;
  }
};

Vue by default makes reactive every first-level property for each object in the array.

That can be expensive for large arrays of objects. Yeah, sometimes those lists are paginated, but others you just might have that list in the frontend.

That's usually the case with Google Maps markers, which in fact are huge objects.

So, in these cases, we can gain some performance if we prevent Vue from making reactive that list. And we can do that by using Object.freeze to the list before adding it to the component:

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

Keep in mind that the same applies to Vuex:

const mutations = {
  setUsers(state, users) {
    state.users = Object.freeze(users);
  }
};

By the way, if you need to modify the array, you can still do it by creating a new array. For instance, in order to add an item, you can do it in this way:

state.users = Object.freeze([...state.users, user]);

Are you wondering how much is the performance improvement? We'll see it in the next tip, so stay tuned!

That's it for today! I hope you like this first tip 😛.

Remember you can read this tip online (with copy/pasteable code) and please share VueDose with all your colleagues if you liked it!

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Achieve Max Performance loading your images with v-lazy-image

Don't you know what to do to improve your web performance? Learn Progressive Image Loading, a technique used by Spotify, Medium and Netflix.

Alex Jover Morales

Alex Jover Morales

Aug 30, 2021

Use Responsive Images with v-lazy-image

Is Web Performance a priority for you? Then read this article! You'll learn how to lazy load images with srcset and picture tag using v-lazy-image.

Alex Jover Morales

Alex Jover Morales

Aug 23, 2021

Use Web Workers in your Vue.js Components for Max Performance

Learn how to get up to 20x performance improvement of Vue.js components that rely on heavy tasks so they render and load faster

Alex Jover Morales

Alex Jover Morales

Mar 31, 2020

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner