So verwenden Sie Sortable in Vue

Dieses Mal zeige ich Ihnen, wie Sie Sortable in Vue verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Sortable in Vue gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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.

Die Szene sieht so aus: 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 bereitgestellten Lebenszyklusfunktion auszuführen, eine Reihe von Drag-Ereignissen abzuhören, das DOM im Ereignisrückruf zu verschieben und die Daten zu aktualisieren.

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 die Abhängigkeitsinjektion und -verfolgung von defineProperty 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, nach der Drag-and-Drop-Sortierung wird das echte DOM zu

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

At Dieses Mal wurde nur der reale DOM manipuliert und seine Position angepasst, aber die Struktur des virtuellen Doms 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 sortieren wir auch die Listenelemente nach dem tatsächlichen DOM und werden zu

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

Zu diesem Zeitpunkt ist der berechnete Patch gemäß dem Diff-Algorithmus Die ersten beiden Elemente von VNode sind Knoten desselben Typs, also sind sie es direkt aktualisiert, das heißt, der $A-Knoten wird auf $B aktualisiert, und der $B-Knoten wird auf $ A aktualisiert, das echte DOM hat sich wieder in

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

, also nach dem Ziehen ein weiterer Vorgang. Bei Problemen, die einmal durch den Patch-Algorithmus aktualisiert wurden, kann der Vorgangspfad einfach als

Ziehen und Verschieben verstanden werden das echte DOM -> Betreiben des Datenarrays -> Patch-Algorithmus aktualisiert dann das echte DOM

Grundursache

Die Grundursache ist die Inkonsistenz zwischen Virtuelles DOM und echtes DOM.

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

Vermeiden Sie bei Verwendung des Vue-Frameworks eine direkte Manipulation des DOM

Lösung

1. Markieren Sie jeden VNode eindeutig, indem Sie einen Schlüssel festlegen. Auf diese Weise empfiehlt Vue auch die Verwendung der V-For-Anweisung. Da bei der Beurteilung, ob zwei VNodes vom gleichen Typ sind, die sameVnode-Methode 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 Operation wiederherstellen, d. h. in der Rückruffunktion [$B,$A,$C,$D] auf [$A,$B,$C,$D] wiederherstellen. , und den DOM-Vorgang an Vue zurückgeben

Ziehen und verschieben Sie den echten DOM ->Stellen Sie den Verschiebungsvorgang wieder her-> Manipulieren Sie das Datenarray-> Patch-Algorithmus und aktualisieren Sie dann den echten 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. Dies wird natürlich nicht empfohlen, ich gebe 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
      })
    },

Wenn wir also normalerweise das Framework verwenden, müssen wir auch das Implementierungsprinzip des Frameworks verstehen, sonst wissen wir nicht, wie ~

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:

So bedienen Sie NodeJS, um Seitenressourcen durch Antwort-Writeback zu rendern

So bedienen Sie NodeJS zur Verwendung Websocket

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Sortable in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!