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实现)简析

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值