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

先答案

推荐方案：正确绑定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实现)简析