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

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

具體的做法是在mounted生命周期函數里，對this.$el進行真實DOM的操作，監(jiān)聽drag的一系列事件，在事件回調里移動DOM，并更新data。

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

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

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

假設我們的列表元素數組是

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

渲染出來后的DOM節(jié)點是

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

那么Virtual Dom對應的結構就是

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

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

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

此時我們只操作了真實DOM，改編了它的位置，而Virtual Dom的結構并沒有改變，依然是

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

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

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

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

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

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

拖拽移動真實DOM -> 操作數據數組 -> Patch算法再更新真實DOM

根本原因

根本原因是Virtual DOM和真實DOM之間出現(xiàn)了不一致。
所以在Vue2.0以前，因為沒有引入Virtual DOM，這個問題是不存在的。
在使用Vue框架的時候要盡量避免直接操作DOM

解決方案

1. 通過設置key唯一標志每一個VNode，這也是Vue推薦的使用v-for指令的方式。因為在判斷兩個VNode是否為同類型時會調用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. 因為根本原因是真實DOM和VNode不一致，所以可以通過把拖拽移動真實DOM的操作還原，即在回調函數里，把[$B,$A,$C,$D]還原成[$A,$B,$C,$D]，讓DOM的操作交還給Vue

拖拽移動真實DOM ->還原移動操作 -> 操作數據數組 -> Patch算法再更新真實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]
                    // 先刪除移動的節(jié)點
                    $ul.removeChild($li)    
                    // 再插入移動的節(jié)點到原有節(jié)點，還原了移動的操作
                    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.暴力解決！不走patch更新，通過v-if設置，直接重新渲染一遍。當然不建議這么做，只是提供這種思路~

        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
            })
        },

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