Vue中使用Sortable bug:排序混乱、与数据不一致、拖拽结束后回跳

更新

20/11/7
因为研究了patch算法，所以又质疑自己之前答案，目前有两种可能，待验证

正确绑定key（patch算法）

在封装组件中，绑定数组下标，不出现问题，在有其他列表渲染情况下，绑定下标出现了错误（偶然）
在list中的对象（响应式数据）中添加一个唯一id绑定似乎就解决了这个问题;
一个列表中index是唯一，即按照patch源码来说是有差异，可比较出来的。所以，要么是patch方法有问题，要么是vdom和真实dom(更新)绑定有问题

vdom和真实dom(更新)绑定问题

draggable操作了真实dom（需要看源码确认），drag后回调函数中操作了vue的响应式数据 =》 vdom diff =》 真实dom改变。
解决方式可以参考https://www.jianshu.com/p/d92b9efe3e6a
不全认同上文，但是为我说清了大多问题

原文

2019-09-24 14:15:18

先答案

推荐方案：正确绑定key
https://www.jianshu.com/p/d92b9efe3e6a
此文很详细了，各位应该看这个就够了，方案也在里面，我尽量不重复造轮子，做补充。

原因：

VUE中的virtualDom与真实dom不匹配

思路

现象

1.打印数据是正常的
2.观察到拖拽dom对象后，dom对象又被调换回去
3.当不对data数据进行操作是正常的
4.我写了一个单文件组件，正常，出bug页面引用也正常。同事直接复制代码就bug了
5.绑定了key值的，绑定方式为绑定数组下标

v-for="(item,index) in navList" :key="index" 

猜测与尝试

1.根据现象123，有可能是dom 与数据层出了差错，所以要正确绑定
但是key已经绑定，我再考虑是否是变量污染，是其他地方的index，于是把index的名字改了，无用
2.怀疑数据层有问题，用不同变量绑定，然后用watch，compute等关联，并且尝试深浅拷贝对象，无用
3.因为数据层显示一直正确，假设无问题，所以在每次拖拽后重新初始化一边，Sortable.create（），无用
4.怀疑是Sortable源码问题，或者使用配置某个字段有问题，也尝试阅读Sortable文档，查找相关bug，逐个配置字段修改尝试，未果。
5.现象3验证现象2
6.最后还是查看了数据格式，有个key值，重新绑定了下key

结论

根据上面链接文章完善：
操作了真实dom，但是因为绑定问题，虚拟dom并未检测到dom变化。
操作后dom对象已经替换，然后触发方法中修改了数据层，数据更新自然开始更新视图层，被打乱。
引用上面链接：

拖拽移动真实DOM -> 操作数据数组 -> Patch算法再更新真实DOM

其他链接

virtual-dom(Vue实现)简析