Hello! Welcome to VueDose’s first article! Let's start taking the adventure in VueDose, you'll love these tips that will help you.
All of VueDose's articles are very concise, and I believe that people are more likely to find useful things in this format. So, let's go straight to the point.
Usually we need to obtain object data, such as users, projects, articles, etc....
Sometimes we don't even need to modify them, just to show them or store their global state in (.Vuex). Then the simple code for obtaining this data is as follows:
export default {
data: () => ({
users: {}
}),
async created() {
const users = await ("/api/users");
= users;
}
};
Vue will automatically loop through each object of the array and respond to each first-level attribute.
This is an expensive approach for large array objects. Yes, sometimes you can paging this data, but others can get your entire data from the front end.
This is usually the case with Google Maps tags, in fact they are a huge object.
So, in these cases, if Vue can be blocked from reacting to this data, we can obtain some performance improvements. We can use to handle data to implement this before adding it to the component:
export default {
data: () => ({
users: {}
}),
async created() {
const users = await ("/api/users");
= (users);
}
};
This also works for Vuex:
const mutations = {
setUsers(state, users) {
= (users);
}
};
By the way, if you want to modify the array, you can create a new array to implement. For example, add data items on the original one, you can do this:
= ([..., user]);
Do you want to know how much performance improvement? We'll be inNext articleSee it, so stay tuned.
That’s all today! Hope you will like this first post
understand
The main thing this article says is that if you are sure that the data is purely for display, and if the data you request is particularly large at one time, you can use it to freeze your data. After freezing the data, it will block Vue's default response mechanism and improve Vue's performance.
Definition of ():
The () method can freeze an object. A frozen object cannot be modified again; if an object is frozen, new attributes cannot be added to the object, existing attributes cannot be deleted, enumeration, configurability, writability of existing attributes, and the values of existing attributes cannot be modified. In addition, the prototype of an object cannot be modified after freezing. freeze() Returns an object with the same parameters as the passed in.
Ending
With limited levels, there are inevitably some mistakes. I hope you can point it out while slandering it. Thank you!
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.