Verhindern Sie, dass vue.js Daten erneut rendert?

Question

Ich habe eine Vue-Komponente, die eine prop namens data hat. Diese Datenreferenz empfängt die ersten 25 Ergebnisse einer Back-End-Abfrage.

Letztendlich könnten wir ~ 250 Ergebnisse und der Rest der Ergebnisse zu holen sind mit einem AJAX-Aufruf geholt werden mit einem Versatz von 25

diese Weise kann der Benutzer zumindest die ersten 25 Ergebnisse anzeigen kann sofort und wir haben eine statisch generierte Backend-Seite mit 25 Ergebnissen, um die richtige SEO zu gewährleisten.

Die ersten 25 Ergebnisse werden in einem Vuex-Speicher gespeichert und wenn der AJAX-Aufruf beendet ist, möchte ich meine AJAX-Daten der verbleibenden 225 Ergebnisse mit den bereits vorhandenen 25 Ergebnissen zusammenführen.

Das Problem, dass ich konfrontiert bin, wenn ich die Ergebnisse mit einem v-for die gesamte Liste Rendern Rendern, wenn ich die Daten zusammenführen, auch wenn die ersten 25 Ergebnisse in der Reihenfolge bleiben und das Endergebnis gleich aussieht.

Gibt es eine Möglichkeit, zu verhindern, dass dieses erneute Rendern stattfindet, wenn ich meine Daten zusammenführe?

bearbeiten

I verwendet lodash merge zu versuchen und meine Werte zu verschmelzen mit etwas ganz anderes zu tun scheint, als nur concat verwendet, die für meinen Fall funktioniert.

Im Falle eines Concats scheint es kein Rendern zu geben.

Answer 1

Fest durch unshift Verwendung und schieben bei Bedarf vorangestellt wird und hängen:

const offSet = state.currentPage * state.itemsPerPage; 

const start = payload.slice(0, offSet - state.itemsPerPage); 
const end = payload.slice(offSet); 

rootState.filters.data.unshift(...start); 
rootState.filters.data.push(...end); 

Dies lässt die Anordnung intakt und es arbeitet mit Paginierung. Auf diese Weise wird kein Rendering von Vue.js durchgeführt.