sortable.js——Vue 数据更新问题

从一个 bug 说起

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

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

Vue 的数组更新问题

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

以下参考 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