When loading a large amount of data in Vue and forming a list, you can optimize performance by:
-
Paging loading: Do not load all the data at once, but load the data in batches, and only load the amount of data that needs to be displayed on the current page each time.
vue-infinite-loadingInfinite scrolling can be achieved using third-party libraries such as -
Virtual scrolling: Only render the data in the currently visible area, and use placeholders for invisible data instead.
vue-virtual-scrollerThis can be achieved by using third-party libraries such as -
Lazy loading: data is only loaded when it needs to be displayed. A method that can trigger loading data when scrolling to each list item.
-
Attributes used : Add a unique key to each piece of data in the loop, so that Vue can update the DOM more efficiently
v-for.keyv-for -
Avoid using complex calculations or methods in loops: If you calculate complex expressions or call methods in a loop, it will cause performance degradation. The data can be pre-calculated in the mounted hook, and then used directly in the loop.
-
Avoid frequent data change detection: Vue
v-onceinstructions can be used to mark those parts that will not change to reduce unnecessary data change detection. -
Using
v-showinsteadv-if:v-showsimply toggles the CSS "display" property, andv-ifcompletely destroys or recreates the DOM element.v-showIt is more efficient to use if list items are only hidden or shown, rather than frequently added or removed . -
Use
scopedstyles or CSS Modules: Avoid global style pollution and improve style isolation. -
Array formatting using JSON: Format the data as an array when getting the data, which can avoid performance problems caused by Vue's recursive observation of the data.
To sum up, the above method can effectively optimize the performance of the list formed by loading a large amount of data in Vue. According to specific scenarios and requirements, choose the appropriate method to improve performance.