• Improve performance on large lists in Vue
  • Alex Jover
  • Translator: Uncle Ho, the programmer

Special disclaimer: This article is a series posted by author Alex Jover on VueDose.

Copyright belongs to the author.

The translator had already communicated with the author before the translation to get permission to translate the whole series.

In order not to disturb your reading, the authorization record is placed at the end of this article.

Hi, everybody! Welcome to the first article of VueDose. I’m ready to start this journey on VueDose to help developers like you learn some awesome techniques.

First of all, articles published on VueDose are very concise, because I believe this style of writing is more helpful to readers, so let’s get straight to the point.

Body content

Usually we request list data in the application, such as list of users, list of items, list of articles, and so on……

And sometimes we don’t modify the requested list data, but simply display it, or store it in a global state manager (also known as Vuex). The schematic code for the request data list looks like this:

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

By default, Vue sets the level 1 properties of all objects in the this.users array to reactive data.

This is a very high performance cost for large object arrays. Yes, there are times when the table data is paginated, but there are always times when it is not paginated and displayed in front.

A practical example is Google Maps’ markers list data, which is a large array of objects.

So, in certain cases, if we can prevent Vue from setting the list data to be responsive, we can bring some performance gains to the project. Freeze method to freeze the obtained list data before assigning it to the component:

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

Remember, the same applies to the Vuex practice:

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

By the way, if you do need to modify the requested list data, you can still do so by creating a new array. For example, to add an element of the same type to the original list data, you can do this:

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

You might be tempted to ask, how much of a performance boost does this offer? We see the details in the next article, please continue to pay attention!

That’s all for today, and I hope you enjoyed 😛.

You can read this article online, and copy and paste the source code. If you like this series, please share it with your colleagues!

conclusion

Other articles in this series will be translated and posted to nuggets as they are published on the series website. Please keep an eye on uncle He, I believe I will bring you more quality content, don’t forget to like ~

If you want to know more about me, please check out the following:

  • Personal blog: blog.hadesz.com
  • Personal Github repository: github.com/hadeshe93
  • Personal wechat official account: Search “Uncle He”

Request translation of authorization records