Vue+Sortable 사용

이번에는 Vue+Sortable 사용법과 Vue+Sortable 사용 시 주의사항에 대해 소개해드리겠습니다.

저는 이전에 컴포넌트 라이브러리 Vue와 Element-UI를 사용하여 백엔드 관리 시스템을 개발했는데 매우 흥미로운 문제에 직면하여 이를 여러분과 공유하고 싶습니다.

목록 표시 페이지에서는 Element-UI의 테이블 구성 요소를 사용했습니다. 새로운 요구 사항은 원본 테이블을 기반으로 드래그 앤 드롭 정렬을 지원하는 것입니다. 하지만 원본 컴포넌트 자체에서는 드래그 앤 드롭 정렬을 지원하지 않으며, Element-UI에서 직접 도입하기 때문에 소스코드를 수정하는 것이 불편하므로 DOM을 직접 조작하는 방법밖에 없습니다.

구체적인 방법은 마운트된 라이프 사이클 함수에서 this.$el에 대해 실제 DOM 작업을 수행하고, 일련의 드래그 이벤트를 수신하고, 이벤트 콜백에서 DOM을 이동하고, 데이터를 업데이트하는 것입니다.

터치 이벤트와 유사한 HTML5 드래그 이벤트가 꽤 많이 있습니다. 수동으로 구현할 수도 있지만 여기서는 게으르고 오픈 소스 Sortable 라이브러리를 사용하여 캡슐화된 이벤트를 모니터링합니다. Vue의 개발 모델에 따라 모바일 DOM의 콜백에서 실제 데이터 데이터를 업데이트하여 데이터와 DOM 간의 일관성을 유지합니다.

여기까지라고 생각했다면, 조만간 당신은 훔친 게으름을 갚아야 할 것입니다. . . 나는 이 해결 방법이 훌륭하다고 생각했지만 디버깅하려고 하자마자 이상한 현상이 발생했습니다. A와 B를 드래그하여 바꾼 후 B와 A가 마술처럼 다시 다시 바뀌었습니다! 무슨 일이야? 실제 DOM을 이동한 후에는 해당 데이터도 이동하므로 작업에는 문제가 없는 것으로 보입니다.

무엇이 문제인가요? Vue의 구현 원리를 떠올려 보겠습니다. Vue2.0 이전에는 DefineProperty 종속성 주입 및 추적을 통해 양방향 바인딩이 이루어졌습니다. v-for 배열 명령어의 경우 고유 키가 지정되면 효율적인 Diff 알고리즘을 통해 배열 요소의 차이가 계산되고 최소한의 이동 또는 삭제 작업이 수행됩니다. Vue 2.0 이후 Virtual Dom이 도입된 후 Children 요소의 Dom Diff 알고리즘은 실제로 전자와 유사합니다. 유일한 차이점은 2.0 이전에는 Diff가 v-for 명령어의 배열 객체를 직접 대상으로 삼았지만 2.0 이후에는 그것은 Virtual Dom을 목표로 삼았습니다. DOM Diff 알고리즘은 여기서 설명하지 않습니다. virtual-dom diff 알고리즘은 여기서 더 명확하게 설명됩니다.

목록 요소 배열이

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

렌더링된 DOM 노드는

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

그러면 Virtual Dom의 해당 구조는

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

드래그 앤 드롭 가정 sorting 이후 실제 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]

로 돌아가서 업데이트되는 문제가 있습니다. 드래그 후의 패치 알고리즘은 간단히

실제 DOM을 드래그하여 이동 -> 데이터 배열 조작 -> 패치 알고리즘은 실제 DOM을 업데이트합니다

근본 원인 가상 DOM과 실제 DOM 사이의 불일치입니다.

그래서 Vue2.0 이전에는 Virtual DOM이 도입되지 않았기 때문에 이런 문제는 존재하지 않았습니다.

Vue 프레임워크를 사용할 때 DOM을 직접 조작하는 것을 피하세요

솔루션

1. 키를 설정하여 각 VNode를 고유하게 표시합니다. 이는 Vue가 v-for 명령 사용을 권장하는 방식이기도 합니다. 두 VNode가 동일한 유형인지 판단할 때 sameVnode 메소드가 호출되므로 키가 동일한지 판단하는 것이 우선입니다

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]로 복원하고 Vue로 DOM 작업

실제 DOM을 드래그하여 이동 - >이동 작업 복원-> 데이터 배열 조작-> 그러면 패치 알고리즘이 실제 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. 해결책! 패치 업데이트 없이 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
      })
    },

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사를 주목하세요. 웹사이트!

추천 자료:

서버 측 렌더링을 위한 Vue+Nuxt.js

Angular는 HMR 코드 분석을 사용합니다.

vue를 사용하여 모바일 드롭다운 목록 만들기

위 내용은 Vue+Sortable 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!