Verwenden Sie Vue+Sortable

Dieses Mal werde ich Ihnen die Verwendung von Vue+Sortable und die Vorsichtsmaßnahmen für die Verwendung von Vue+Sortable vorstellen. 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.

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, dass nach Drag & Drop Sortieren, das echte Das DOM wird zu

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

Zu diesem Zeitpunkt haben wir nur das echte DOM manipuliert und angepasst Position und die Struktur von Virtual Dom hat sich nicht geändert, sie ist immer noch

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

Zu diesem Zeitpunkt auch Ändern Sie die Listenelemente entsprechend dem tatsächlichen DOM. Nach dem Sortieren wird es zu

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

At Diesmal lautet der berechnete Patch gemäß dem Diff-Algorithmus. Die ersten beiden Elemente von VNode sind Knoten desselben Typs, sodass sie direkt aktualisiert werden, dh der Knoten $ A wird auf $ B und der Knoten $ B aktualisiert wird auf $A aktualisiert und das echte DOM ändert sich wieder in

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

Es gibt also ein Problem Es wird nach dem Ziehen durch den Patch-Algorithmus aktualisiert 🎜>

Die Grundursache

Die Grundursache liegt zwischen dem virtuellen DOM und dem realen DOM. Es besteht eine Inkonsistenz.

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 geben Sie den DOM-Vorgang an Vue zurück

Ziehen Sie den echten DOM und verschieben Sie ihn -> Stellen Sie den Verschiebungsvorgang wieder her -> Manipulieren Sie den 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. 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:

Vue+Nuxt.js ermöglicht serverseitiges Rendering

Angular verwendet HMR-Code-Parsing

Verwenden Sie Vue, um eine mobile Dropdown-Liste zu erstellen

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