這篇文章將為大家詳細講解有關(guān)Sortable怎么在Vue中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、柘城網(wǎng)站維護、網(wǎng)站推廣。

假設(shè)我們的列表元素數(shù)組是

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

根本原因

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

所以在Vue2.0以前，因為沒有引入Virtual DOM，這個問題是不存在的。

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

解決方案

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

拖拽移動真實DOM ->還原移動操作 -> 操作數(shù)據(jù)數(shù)組 -> 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數(shù)組
          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設(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(){
            // 重新渲染之后，重新進行Sortable綁定
            new Sortable(that.$el.querySelector('#ul'), {
              onUpdate:updateFunc
            })
          })
        })
      }
      new Sortable($ul, {
        onUpdate:updateFunc
      })
    },

關(guān)于Sortable怎么在Vue中使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前題目：Sortable怎么在Vue中使用-創(chuàng)新互聯(lián)
本文路徑：http://chinadenli.net/article12/ddehdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、Google、網(wǎng)站改版、面包屑導(dǎo)航、軟件開發(fā)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)