이번에는 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'}]
드래그 가정 드래그해서 정렬하면 실제 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 노드는 실제 DOM인 $A로 업데이트되어 다시
[$A,$B,$C,$D]
로 변경되었으므로 업데이트되는 문제가 있습니다. 드래그 후 Patch 알고리즘에 의한 작업 경로는 간단히
drag 실제 DOM 이동 -> 데이터 배열 조작 -> 실제 DOM 업데이트
근본 원인
이라고 이해하면 됩니다. 근본 원인은 가상 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
})
},로그인 후 복사
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
vue-cli怎样做出跨域请求
Angular5对组件标签添加样式class步骤说明
JS怎样实现运算符重载
위 내용은 Vue에서 Sortable을 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
