Detaillierte Erläuterung der Schritte zur Verwendung von Sortable in Vue

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung von Sortable mit Vue. Was sind die Vorsichtsmaßnahmen für die Verwendung von Sortable mit Vue?

Ich habe zuvor ein Backend-Managementsystem entwickelt, das die Komponentenbibliothek Vue und Element-UI verwendet. Ich bin auf ein sehr interessantes Problem gestoßen und möchte es mit Ihnen teilen.

Auf einer Listenanzeigeseite habe ich die Tabellenkomponente von Element-UI verwendet. Die neue Anforderung besteht darin, die Drag-and-Drop-Sortierung basierend auf der Originaltabelle zu unterstützen. Die ursprüngliche Komponente selbst unterstützt jedoch keine Drag-and-Drop-Sortierung. Da sie direkt über Element-UI eingeführt wird, ist es umständlich, ihren Quellcode zu ändern. Daher besteht die einzig mögliche Methode darin, das DOM direkt zu bedienen.

Die spezifische Methode besteht darin, echte DOM-Operationen für this.$el in der gemountetenLebenszyklus-Funktion auszuführen, eine Reihe von Ereignissen des Ziehens zu überwachen und zurückzurufen Verschieben Sie in diesem Fall das DOM nach innen und aktualisieren Sie die Daten.

Es gibt eine ganze Reihe von HTML5-Drag-Ereignissen, die Touch-Ereignissen ähneln. Sie können sie auch manuell implementieren, aber hier bin ich faul und verwende eine sortierbare Open-Source-Bibliothek und übergebe diese direkt Hören Sie sich den gekapselten Rückruf an und aktualisieren Sie gemäß dem Entwicklungsmodell von Vue die tatsächlichen Datendaten im Rückruf des mobilen DOM, um die Konsistenz zwischen den Daten und dem DOM aufrechtzuerhalten.

Wenn Sie denken, dass es hier vorbei ist, liegen Sie völlig falsch. Früher oder später werden Sie die gestohlene Faulheit zurückzahlen müssen. . . Ich fand diese Lösung wunderbar, aber sobald ich sie debuggen wollte, trat ein seltsames Phänomen auf: Nachdem A und B gezogen und ausgetauscht wurden, wechselten B und A auf magische Weise wieder zurück! Was ist los? Es scheint, dass es bei unserer Operation kein Problem gibt. Nachdem das reale DOM verschoben wurde, sollten wir auch die entsprechenden Daten verschieben. Die Reihenfolge des Datenarrays und die Reihenfolge des gerenderten DOM sollten konsistent sein.

Was ist das Problem? Erinnern wir uns an das Implementierungsprinzip von Vue. Vor Vue2.0 wurde die bidirektionale Bindung durch definePropertyAbhängigkeitsinjektion und Tracking erreicht. Wenn für den v-for-Array-Befehl ein eindeutiger Schlüssel angegeben wird, wird die Differenz der Elemente im Array durch einen effizienten Diff-Algorithmus berechnet und es werden nur minimale Verschiebungs- oder Löschvorgänge durchgeführt. Nach der Einführung von Virtual Dom nach Vue 2.0 ähnelt der Dom Diff-Algorithmus des Children-Elements tatsächlich dem ersteren. Der einzige Unterschied besteht darin, dass Diff vor 2.0 direkt auf das Array-Objekt der v-for-Anweisung abzielte, während nach 2.0 es zielte auf den virtuellen Dom. Der DOM-Diff-Algorithmus wird hier nicht im Detail beschrieben. Der Virtual-Dom-Diff-Algorithmus wird hier genauer erklärt

Angenommen, unser Listenelement-Array ist

['A',' B', 'C','D']

Der gerenderte DOM-Knoten ist

[$A,$B,$C, $ D]

Dann ist die entsprechende Struktur von Virtual Dom

[{elm:$A,data:'A'},
{elm:$ B, data:'B'},
{elm:$C,data:'C'},
{elm:$D,data:'D'}]

Angenommen, Drag Nach der Drag-and-Drop-Sortierung wird das eigentliche DOM zu

[$B,$A,$C,$D]

Zu diesem Zeitpunkt haben wir nur das bedient echter DOM, angepasst Seine Position wurde geändert, aber die Struktur von Virtual Dom hat sich nicht geändert. Es ist immer noch

[{elm:$A,data:'A'},
{. elm:$B,data: 'B'},
{elm:$C,data:'C'},
{elm:$D,data:'D'}]

Zu diesem Zeitpunkt werden wir Die Listenelemente werden auch nach dem tatsächlichen DOM sortiert und werden zu

['B','A','C','D']

Zu diesem Zeitpunkt ist gemäß dem Diff-Algorithmus der berechnete Patch, dass die ersten beiden Elemente von VNode Knoten desselben Typs sind, sodass sie direkt aktualisiert werden, dh der $A-Knoten wird auf $ aktualisiert B, der $B-Knoten wird auf $A aktualisiert und das echte DOM ändert sich zurück zu

[$A,$B,$C,$D]

Es besteht also das Problem, dass es nach dem Ziehen durch den Patch-Algorithmus aktualisiert wird. Der Vorgangspfad kann einfach wie folgt verstanden werden:

Ziehen und verschieben Sie das Datenarray -> das echte DOM

Die Grundursache

Die Grundursache ist virtuell. Es besteht eine Inkonsistenz zwischen dem DOM und dem realen DOM.

Vor Vue2.0 gab es dieses Problem nicht, da Virtual DOM nicht eingeführt wurde.

Vermeiden Sie bei Verwendung des Vue-Frameworks den direkten Betrieb des DOM

Lösung

1. Markieren Sie jeden VNode eindeutig, indem Sie den Schlüssel festlegen Dies ist auch die empfohlene Methode zur Verwendung der v-for-Direktive in Vue. Da bei der Beurteilung, ob zwei VNodes vom gleichen Typ sind, die Methode sameVnode aufgerufen wird, besteht die Priorität darin, zu beurteilen, ob der Schlüssel derselbe ist

function sameVnode (a, b) {
 return (
  a.key === b.key &&
  a.tag === b.tag &&
  a.isComment === b.isComment &&
  isDef(a.data) === isDef(b.data) &&
  sameInputType(a, b)
 )
}

2 Denn der Hauptgrund ist, dass es sich bei dem echten DOM und dem VNode um denselben Typ handelt inkonsistent, sodass Sie das echte DOM verschieben können, indem Sie die Vorgangswiederherstellung ziehen, d. h. in der Rückruffunktion [$B, $A, $C, $D] auf [$A, $B, $C, $D] und lassen Sie die DOM-Operation zurückkehren. Ziehen Sie das reale DOM nach Vue

->Stellen Sie die Verschiebungsoperation wieder her-> Manipulieren Sie den Algorithmus und aktualisieren Sie dann das reale DOM

Der Code lautet wie folgt

var app = new Vue({
    el: '#app', 
    mounted:function(){
      var $ul = this.$el.querySelector('#ul')
      var that = this
      new Sortable($ul, {
        onUpdate:function(event){
          var newIndex = event.newIndex,
            oldIndex = event.oldIndex
            $li = $ul.children[newIndex],
            $oldLi = $ul.children[oldIndex]
          // 先删除移动的节点
          $ul.removeChild($li)  
          // 再插入移动的节点到原有节点，还原了移动的操作
          if(newIndex > oldIndex) {
            $ul.insertBefore($li,$oldLi)
          } else {
            $ul.insertBefore($li,$oldLi.nextSibling)
          }
          // 更新items数组
          var item = that.items.splice(oldIndex,1)
          that.items.splice(newIndex,0,item[0])
          // 下一个tick就会走patch更新
        }
      })
    },
    data:function() {
      return {
        message: 'Hello Vue!',
        items:[{
          key:'1',
          name:'1'
        },{
          key:'2',
          name:'2'
        },{
          key:'3',
          name:'3'
        },{
          key:'4',
          name:'4'
        }]
      }
    },
    watch:{
      items:function(){
        console.log(this.items.map(item => item.name))
      }
    }
  })

3 .Gewalttätige Lösung! Ohne Patch-Update direkt über die V-IF-Einstellungen erneut rendern. Natürlich wird dies nicht empfohlen, ich liefere nur diese Idee~

    mounted:function(){
      var $ul = this.$el.querySelector('#ul')
      var that = this
      var updateFunc = function(event){
        var newIndex = event.newIndex,
          oldIndex = event.oldIndex
        var item = that.items.splice(oldIndex,1)
        that.items.splice(newIndex,0,item[0])
        // 暴力重新渲染！
        that.reRender = false
        // 借助nextTick和v-if重新渲染
        that.$nextTick(function(){
          that.reRender = true
          that.$nextTick(function(){
            // 重新渲染之后，重新进行Sortable绑定
            new Sortable(that.$el.querySelector('#ul'), {
              onUpdate:updateFunc
            })
          })
        })
      }
      new Sortable($ul, {
        onUpdate:updateFunc
      })
    },

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie vue-cli domänenübergreifende Anfragen stellt

Angular5 Schritte zum Hinzufügen einer Stilklasse zur Komponente Tags Erklären

Wie JS die Operatorüberladung implementiert

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Sortable in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!