So können Sie lange Vue-Listen schnell laden

vue-long-list-load, Laden langer Listen, die besondere Bedingungen erfüllen. Unterstützung: 1. Jeder Knoten hat eine andere Höhe und kann frei eingestellt werden. 2. Jeder Knoten kann geändert werden, ohne den Ladeeffekt zu beeinträchtigen. 3. Kann genau zur angegebenen Position scrollen.

Hintergrund

Es besteht die Anforderung, eine lange Liste zu rendern, und ursprünglich wurde vue-virtual-scroll-list verwendet. Allerdings ist die Höhe jedes Knotens unterschiedlich, was die Verwendung etwas problematisch macht. Bei entsprechendem Bedarf können Sie auf meine Lösung zurückgreifen. Jeder ist herzlich eingeladen, zu kommunizieren!

Vue - Lange Liste - Laden

Es werden lange Listen geladen, die spezielle Bedingungen erfüllen. Die Höhen der Knoten in der Liste sind unterschiedlich und jeder Knoten kann geändert und an einer angegebenen Position positioniert werden. www.npmjs.com/package/vue…

Hauptinhalt

1. Vergleich zwischen vue-long-list-load und vue-virtual-scroll-list
2. Ideen zur Implementierung von Vue-Long-List-Load
3. Basiscode
4. So verwenden Sie das Plugin
5. Plugin-Parameter Beschreibung
   

1. Komponentenvergleich

Die beiden Plug-Ins Vue-Long-List-Load und Vue-Virtual-Scroll-List haben jeweils ihre eigenen Vor- und Nachteile. Wenn wir ein Plug-In auswählen, sollten wir dasjenige auswählen, das am besten zum Anwendungsszenario passt. Nachfolgend finden Sie eine Gegenüberstellung der Grundfunktionen der beiden Plugins. Das Hauptmerkmal von vue-long-list-load besteht darin, dass es für Szenarien geeignet ist, in denen die Größen der einzelnen Knoten nicht einheitlich sind, während vue-virtual-scroll-list besser für Listen mit sehr einheitlichen Knoten und in w gemessenen Listenlängen geeignet ist.

2. Umsetzungsideen

Die Hauptidee besteht darin, jeden Knoten durch den virtuellen Dom \color{red}{virtual dom} zu besetzen und den angezeigten Knoten entsprechend den Änderungen des anzeigbaren Ansichtsfensters anzuzeigen. Überwachung von Faktoren, die sich auf den anzeigbaren Ansichtsbereich auswirken. Änderungen der Gesamtbreite und -höhe der Seite, Änderungen der Knotenhöhe und das Scrollen der Seite zu einem bestimmten Knoten können sich alle auf Änderungen im Ansichtsbereich auswirken. Bei einer Änderung des Viewports werden die darstellbaren Nodes berechnet und an die Node-Komponenten gemountet. Die Nodes, die sich nicht im Viewport befinden, werden zerstört und ein leeres div bleibt erhalten. Die folgende Abbildung ist ein Flussdiagramm der Implementierungsidee.

3. Schlüsselmethode Quellcodeanalyse

Die Hauptstruktur des HTML-Eintrags ist wie folgt: \color{red}{v-for}v−for zeigt die Knoten der langen Listenlänge an und legt eine Mindesthöhe von \color{red}{minimum height} über :style fest. Der Grund für das Festlegen der Mindesthöhe besteht darin, dass dieser Höhenwert möglicherweise nicht genau ist. Wenn die eigentliche Komponente gerendert wird, wird die genaueste Höhe berechnet. Wenn die Höhe direkt verwendet wird, werden die Komponenten im Knoten möglicherweise nicht vollständig angezeigt. Gleichzeitig wird jedem Knoten eine eindeutige ID (scrollItem_eindeutige Kennung) zugewiesen, die zum Abrufen von DOM-Informationen basierend auf Daten verwendet wird. Die Knotenkomponente definiert eine eindeutige Klasse (Long-Item-Unique-Identifier), die hauptsächlich zum Mounten der realen Listenkomponente und zum Überwachen der Höhenänderungen der Komponente verwendet wird. showList[index] ist die eindeutige Kennung, die steuert, ob ein Knoten angezeigt wird.

  <!--HTML-Code-->
  <Vorlage>
    <div 
      :
      :style="{'min-height': (item.height>=0?item.height:height) + 'px'}"
      :Schlüssel="Element[Datenschlüssel]"
      :id="'scrollItem_' + item[Datenschlüssel]"
      v-for="(Element, Index) in Datenliste" 
      >
      <langes Element 
        v-if="Liste anzeigen[index]"
        :dataKey="Datenschlüssel" 
        :Artikel="Artikel"
        :Boxhöhe="Elementhöhe||0"
        :direction="Richtung"
        :Höhenänderung="Höhenänderung"
        :extendCcomments="extendCcomments"> 
      </langer-Artikel>
    </div>
  </Vorlage>

Wenn showList[index] wahr ist, wird der entsprechende Knoten angezeigt. Während des bereitgestellten Lebenszyklus ruft Long-Item ExtendCcomments zurück. Hängen Sie es über \color{red}{Vue.extend Profile}Vue.extendProfile in das entsprechende DOM ein. ComponentProps sind einige Parameter, die von der Knotenkomponente übergeben werden und die alle beim Mounten gemountet werden.

 <!--Komponente einbinden-->
  Kommentare erweitern(Element){
    this.componentProps.item=Element
    var Profil = Vue.extend(this.dataComponent);
        //Erstellen Sie eine Profilinstanz und hängen Sie sie an ein neues Profilelement an ({
          propsData: diese.componentProps
        }
      ).$mount('.long-item-'+item[this.dataKey]);
  }

Der \color{red}{element-resize-detector}element-resize-detector wird verwendet, um Änderungen in der DOM-Größe zu überwachen. Wenn sich die Breite und Höhe jedes Knotens ändern und von der Originalgröße abweichen, wird die Methode heightChange zurückgerufen, um die Größe zu aktualisieren und Operationsberechnungen am Anzeigeknoten durchzuführen.

 <!--Jede Knotengröße ändert sich-->
  dies.$nextTick(()=> {
    dies.$DomListener.listenTo(document.getElementById('long-item-'+this.item[this.dataKey]), (Element)=>{
      wenn (diese.Boxhöhe != Element[diese.Richtungskonfiguration.Breite]) {
        diese.Höhenänderung(dieses.Element, Element[diese.Richtungskonfiguration.Breite])
      } 
    })
  });

Die Methode zum Abrufen des anzeigbaren Ansichtsfensterbereichs. Diese Methode wird aufgerufen, wenn die Seite gescrollt wird und sich die Größe ändert. Daher wird diese Methode beim Aufruf verwackelungssicher verarbeitet. Wenn innerhalb von 300 ms fortlaufende Aufrufe erfolgen, wird nur der letzte Aufruf ausgeführt, da andernfalls häufige Berechnungen die Leistung beeinträchtigen. Der anzeigbare Ansichtsfensterbereich berechnet sich aus der Größe des aktuellen Ansichtsfensters und der beiden Ansichtsfenster davor und danach, also insgesamt drei Ansichtsfenstern. Dies sorgt für ein besseres Erlebnis in einem kleinen Bildlaufbereich.

  getShowLimit(startTop) {
    const scrollTop = startTop || this.scrollWrap[this.directionConfig.scrollTo] || 0; // Scroll-Distanz this.viewClientHeight = this.scrollWrap[this.directionConfig.width]; // Höhe des sichtbaren Bereichs this.scrollTop = scrollTop
    this.showStart = scrollTop - this.viewClientHeight
    this.showEnd = scrollTop + 2*this.viewClientHeight
    wenn(this.setTopTimer){
      Zeitüberschreitung löschen(this.setTopTimer)
    } 
    this.setTopTimer = setTimeout(() => {
      this.setItemTopheight()
    }, 300);
  },

Berechnen Sie, ob der Knoten basierend auf der Höhe oder Breite angezeigt wird. Da diese Berechnung relativ umfangreich ist und diese Methode nichts mit anderen Methoden zu tun hat, öffnen Sie einfach einen separaten Thread, um die Berechnung durchzuführen. Durch die Einführung des Plugins \color{red}{simple-web-worker}simple−web−worker wird ein eigener Thread zur Berechnung und Anzeige von Knoten geöffnet. Es gibt drei Hauptberechnungsmethoden: Der Anfang des aktuellen Knotens liegt innerhalb des Anzeigeansichtsfensters, das Ende des aktuellen Knotens liegt innerhalb des Anzeigeansichtsfensters und weder der Anfang noch das Ende des aktuellen Knotens liegen innerhalb des Anzeigeansichtsfensters. Es gibt drei Fälle. Wenn einer davon zutrifft, wird der Knoten im Ansichtsfenster angezeigt.

  //Berechnen, ob der Knoten basierend auf der Höhe angezeigt wird setItemTopheight(){
    let stsartId = this.dataList[0]&&this.dataList[0][this.dataKey]
    let startDom = stsartId und document.getElementById('scrollItem_'+stsartId)
    lass startTop = startDom ? startDom[this.directionConfig.offset] : 0
    dieser.worker = dieser.$worker.run((dataList,showStart,showEnd, startTop,hideIds,dataKey,height) => {
      let topHeight = startTop; // Der Abstand von der Oberseite des Titels zur Oberseite let bottomHeight = 0; // Der Abstand von der Unterseite des Titels zur Oberseite let showList = []
      für (lass i = 0, Länge = Datenliste.Länge; i < Länge; i++) {
        let item = Datenliste[i]
        wenn(hideIds.indexOf(item[dataKey]) != -1){
          Liste anzeigen[i] = false;
          weitermachen;
        }
        untere Höhe = obere Höhe + (Elementhöhe>=0?Elementhöhe:Höhe)
        // Beurteilen Sie 1. Der obere Teil der Frage liegt innerhalb des Anzeigebereichs. 2. Der untere Teil der Frage liegt innerhalb des Anzeigebereichs. 3. Weder der obere noch der untere Teil der Frage liegt innerhalb des Anzeigebereichs. if((topHeight>=showStart && topHeight<=showEnd)||
          (untere Höhe>=Start anzeigen und untere Höhe<=Ende anzeigen)||
          (obere Höhe <Start anzeigen && untere Höhe > Ende anzeigen) ){
          Liste anzeigen[i] = true}
         anders{
          showList[i] = false
        } 
        obere Höhe += ((Elementhöhe>=0?Elementhöhe:Höhe));
      }
      showList zurückgeben
    }, [diese.dataList, dies.showStart, dies.showEnd, startTop, dies.hideIds, dieser.dataKey, diese.height])
    .then(res => {
      diese.showList = res
    })
    dieser.Arbeiter = null
  },

4. Nutzung

Installieren Sie vue-long-list-load:

npm installiere vue-long-list-load --save

Anrufen innerhalb eines Projekts

<lange Liste 
 ref="vueLongList"
 Datenschlüssel = "id" 
 scrollWrap
 :dataList="Datenliste" 
 :dataComponent="Datenkomponente" 
 :componentProps="KomponentenProps"
 Höhe=100
 > 
</lange Liste>

5. Parameterbeschreibung

Einige Parameterbeschreibungen

  <--Angenommen dataKey=id-->
  
  <--In der Liste auszublendende Knoten-->
  hideIds:[1, 2]
  <--Die Höhe in den Listendaten dataList ist **Number**. -->
  Datenliste:[
    {id:1,höhe:100},
    {id:2,höhe:200},
    {id:3,höhe:300},
    {id:4,höhe:300},
    {id:5,höhe:300}
  ]
  
  <--Knotenhöhe-->
  Höhe:100
  <--Wenn die Datenliste einen Höhenwert hat, müssen Sie diese Höhe nicht festlegen-->
  <--Wenn weder dataList noch height übergeben werden, ist der Standardwert 100, was zu einer leichten Verzögerung beim Scrollen führen kann; -->
  <--Es wird empfohlen, es durch die Datenliste zu leiten, wenn jede Höhe unterschiedlich ist, und es durch die Höhe zu leiten, wenn sie gleich sind-->
  
  <--Wenn sich die Breite und Höhe eines Knotens ändern, gibt die Rückrufmethode die ID und Höhe als Parameter zurück-->
  geändert(ID, Höhe){ }

Zusammenfassen

Gemäß den praktischen Daten im Projekt hat jeder Knoten grundsätzlich mindestens 500 DOM-Knoten und der Durchschnitt liegt bei über 800 DOM-Knoten. Bei Verwendung von vue-long-list-load werden für Themen, die sich nicht im Rendering-Bereich befinden, nur 2 DOM-Knoten gerendert. Bei einer normalen Berechnung von etwa 800 DOM-Knoten beträgt die Anzahl der im allgemeinen Rendering-Bereich gerenderten Knoten etwa 9. Wenn es sich um eine Liste mit n Knoten handelt, reduziert jedes Laden und jede Operation des DOM das Rendering von (n-9) x (800-2) DOM-Knoten. Wenn die Liste mit 1000 Knoten jedes Mal geladen und bearbeitet wird, entspricht dies einer Reduzierung des Renderings von 726180 DOM-Knoten. Das erste Rendering und das geänderte Neuzeichnen reduzieren das DOM-Rendering erheblich, beschleunigen die Ladegeschwindigkeit und verbessern das Benutzererlebnis. Diese Lösung ist im Projekt bereits seit einiger Zeit umgesetzt und das Benutzerfeedback ist sehr gut. Bei ähnlichen Szenenanforderungen kannst du es gerne nutzen! kommuniziere!

Oben finden Sie Einzelheiten dazu, wie Sie eine lange Vue-Liste schnell laden können. Weitere Informationen zum schnellen Laden einer langen Vue-Liste finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!