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.

#vue #vue.js #programming

Improve performance on large lists in Vue.js
29.10 GEEK