sortable.js——Vue 数据更新问题-CSDN博客

本文讲述了在使用sortable.js实现Vue拖拽功能时遇到的数据更新不渲染问题。通过分析Vue的数组更新机制，尝试使用$forceUpdate()无效后，最终通过数据深拷贝并替换原数组来解决这个问题。尽管问题解决，但根源未明，文章提供了应对类似情况的解决思路。

摘要由CSDN通过智能技术生成

在一个需求中，我需要实现一个拖拽的功能，其中我使用了 sortable.js 去实现，但我发现我拖拽之后的数据并没有渲染在页面上。

简而言之，举个例子，原先的数组是 [1,2,3,4]，拖拽之后，变成了 [4,1,2,3]，但在视图上并没有显现，这不经让我疑惑不解，开始了以下问题的探索，在此记录一下

看到以上问题，你肯定会认为我处理数组的方式不对，毕竟官方文档明确指出了数组的几个坑

以下参考 Vue 文档由于 JavaScript 的限制，Vue 不能检测以下数组的变动： 1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 2.当你修改数组的长度时，例如：vm.items.length = newLength

但是实际上，我避开了这个坑，实际的实现是通过 splice 实现的，这样实际上是不会有问题的。

const tempItem = me.tabs.splice(e.oldIndex, 1)[0]
me.tabs.splice(e.newIndex, 0, tempItem)
复制代码

题外话 实际上，我们在 Vue