之前開(kāi)發(fā)一個(gè)后臺(tái)管理系統(tǒng)，里面用到了Vue和Element-UI這個(gè)組件庫(kù)，遇到一個(gè)挺有意思的問(wèn)題，和大家分享一下。

場(chǎng)景是這樣，在一個(gè)列表展示頁(yè)上，我使用了Element-UI的表格組件，新的需求是在原表格的基礎(chǔ)上支持拖拽排序。但是原有的組件本身不支持拖拽排序，而且由于是直接引入的Element-UI，不方便修改它的源碼，所以比較可行的方法只能是直接操作DOM。

具體的做法是在mounted生命周期函數(shù)里，對(duì)this.$el進(jìn)行真實(shí)DOM的操作，監(jiān)聽(tīng)drag的一系列事件，在事件回調(diào)里移動(dòng)DOM，并更新data。

HTML5 Drag事件還是挺多的，和Touch事件差不多，自己手工實(shí)現(xiàn)也可以，不過(guò)這里就偷了個(gè)懶，直接用了一個(gè)開(kāi)源的Sortable庫(kù)，直接傳入this.$el，監(jiān)聽(tīng)封裝后的回調(diào)，并且根據(jù)Vue的開(kāi)發(fā)模式，在移動(dòng)DOM的回調(diào)里更新實(shí)際的Data數(shù)據(jù)，保持?jǐn)?shù)據(jù)和DOM的一致性。

如果你以為到這就結(jié)束了，那就大錯(cuò)特錯(cuò)，偷過(guò)的懶遲早要還。。。本以為這個(gè)方案是很美好的，沒(méi)想到剛想調(diào)試一下，就出現(xiàn)了詭異的現(xiàn)象：A和B拖拽交換位置之后，B和A又神奇得換回去了！這是怎么回事？似乎我們的操作沒(méi)有什么問(wèn)題，在真實(shí)DOM移動(dòng)了之后，我們也移動(dòng)了相應(yīng)的data，數(shù)據(jù)數(shù)組的順序和渲染出DOM的順序應(yīng)該是一致的。

問(wèn)題出在哪里？我們回憶一下Vue的實(shí)現(xiàn)原理，在Vue2.0之前是通過(guò)defineProperty依賴注入和跟蹤的方式實(shí)現(xiàn)雙向綁定。針對(duì)v-for數(shù)組指令，如果指定了唯一的Key，則會(huì)通過(guò)高效的Diff算法計(jì)算出數(shù)組內(nèi)元素的差異，進(jìn)行最少的移動(dòng)或刪除操作。而Vue2.0之后在引入了Virtual Dom之后，Children元素的Dom Diff算法和前者其實(shí)是相似的，唯一的區(qū)別就是，2.0之前Diff直接針對(duì)v-for指令的數(shù)組對(duì)象，2.0之后則針對(duì)Virtual Dom。DOM Diff算法在這里不再贅述，這里解釋的比較清楚virtual-dom diff算法

假設(shè)我們的列表元素?cái)?shù)組是

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

渲染出來(lái)后的DOM節(jié)點(diǎn)是

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

那么Virtual Dom對(duì)應(yīng)的結(jié)構(gòu)就是

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

假設(shè)拖拽排序之后，真實(shí)的DOM變?yōu)?/p>

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

此時(shí)我們只操作了真實(shí)DOM，改編了它的位置，而Virtual Dom的結(jié)構(gòu)并沒(méi)有改變，依然是

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

此時(shí)我們把列表元素也按照真實(shí)DOM排序后變成

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

這時(shí)候根據(jù)Diff算法，計(jì)算出的Patch為，VNode前兩項(xiàng)是同類型的節(jié)點(diǎn)，所以直接更新，即把$A節(jié)點(diǎn)更新成$B，把$B節(jié)點(diǎn)更新成$A，真實(shí)DOM又變回了

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

所以就出現(xiàn)了拖拽之后又被Patch算法更新了一次的問(wèn)題，操作路徑可以簡(jiǎn)單理解為

拖拽移動(dòng)真實(shí)DOM -> 操作數(shù)據(jù)數(shù)組 -> Patch算法再更新真實(shí)DOM

根本原因

根本原因是Virtual DOM和真實(shí)DOM之間出現(xiàn)了不一致。

所以在Vue2.0以前，因?yàn)闆](méi)有引入Virtual DOM，這個(gè)問(wèn)題是不存在的。

在使用Vue框架的時(shí)候要盡量避免直接操作DOM

解決方案

1、通過(guò)設(shè)置key唯一標(biāo)志每一個(gè)VNode，這也是Vue推薦的使用v-for指令的方式。因?yàn)樵谂袛鄡蓚€(gè)VNode是否為同類型時(shí)會(huì)調(diào)用sameVnode方法，優(yōu)先判斷key是否相同

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、因?yàn)楦驹蚴钦鎸?shí)DOM和VNode不一致，所以可以通過(guò)把拖拽移動(dòng)真實(shí)DOM的操作還原，即在回調(diào)函數(shù)里，把[$B,$A,$C,$D]還原成[$A,$B,$C,$D]，讓DOM的操作交還給Vue

拖拽移動(dòng)真實(shí)DOM ->還原移動(dòng)操作 -> 操作數(shù)據(jù)數(shù)組 -> Patch算法再更新真實(shí)DOM

代碼如下

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]
          // 先刪除移動(dòng)的節(jié)點(diǎn)
          $ul.removeChild($li)  
          // 再插入移動(dòng)的節(jié)點(diǎn)到原有節(jié)點(diǎn)，還原了移動(dòng)的操作
          if(newIndex > oldIndex) {
            $ul.insertBefore($li,$oldLi)
          } else {
            $ul.insertBefore($li,$oldLi.nextSibling)
          }
          // 更新items數(shù)組
          var item = that.items.splice(oldIndex,1)
          that.items.splice(newIndex,0,item[0])
          // 下一個(gè)tick就會(huì)走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.暴力解決！不走patch更新，通過(guò)v-if設(shè)置，直接重新渲染一遍。當(dāng)然不建議這么做，只是提供這種思路~

    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(){
            // 重新渲染之后，重新進(jìn)行Sortable綁定
            new Sortable(that.$el.querySelector('#ul'), {
              onUpdate:updateFunc
            })
          })
        })
      }
      new Sortable($ul, {
        onUpdate:updateFunc
      })
    },

所以，我們平時(shí)在使用框架的時(shí)候，也要去了解框架的實(shí)現(xiàn)原理的，否則遇到一些棘手的情況就會(huì)無(wú)從下手~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論