Vue使用Sortable步驟詳解

來源：懂視網責編：小采時間：2020-11-27 19:51:04

Vue使用Sortable步驟詳解

Vue使用Sortable步驟詳解:這次給大家帶來Vue使用Sortable步驟詳解，Vue使用Sortable的注意事項有哪些，下面就是實戰案例，一起來看一下。之前開發一個后臺管理系統，里面用到了Vue和Element-UI這個組件庫，遇到一個挺有意思的問題，和大家分享一下。場景是這樣，在一個列表展示頁上，

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue使用Sortable步驟詳解:這次給大家帶來Vue使用Sortable步驟詳解，Vue使用Sortable的注意事項有哪些，下面就是實戰案例，一起來看一下。之前開發一個后臺管理系統，里面用到了Vue和Element-UI這個組件庫，遇到一個挺有意思的問題，和大家分享一下。場景是這樣，在一個列表展示頁上，

渲染出來后的DOM節點是

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

那么Virtual Dom對應的結構就是

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

假設拖拽排序之后，真實的DOM變為

[$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前兩項是同類型的節點，所以直接更新，即把$A節點更新成$B，把$B節點更新成$A，真實DOM又變回了

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

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

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

根本原因

根本原因是Virtual DOM和真實DOM之間出現了不一致。

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

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

解決方案

1、通過設置key唯一標志每一個VNode，這也是Vue推薦的使用v-for指令的方式。因為在判斷兩個VNode是否為同類型時會調用sameVnode方法，優先判斷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]
 // 先刪除移動的節點
 $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.暴力解決！不走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
 })
 },

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

Vue使用Sortable步驟詳解

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 使用vue sortable

熱門焦點

Vue使用Sortable步驟詳解

Vue使用Sortable步驟詳解

Vue使用Sortable步驟詳解

最新推薦

猜你喜歡

熱門推薦