vue2:在异步响应式中确保正确响应的神器 - $nextTick

要实现el-table中行的拖拽，对应到数据层面，就是table所绑定的数组元素的位置变换。实现中在处理完中间部分数据之后，将原数据删除，插入到新位置，如下：

//从this.steps中移除位置为oldIndex的元素，并将其存储在movedItem中
const movedItem = this.steps.splice(oldIndex, 1)[0];
//将这个元素插入到newIndex位置
this.steps.splice(newIndex, 0, movedItem);

这个table有一级子节点，从上到下移动根节点后，总是会把子节点留在上面，没有同步移动：

但是这时候打印出数据来看，this.steps的数据是正确的。所以，DOM没有及时响应更新。

调试过程：

这里做了2步操作，删除原节点和插入到新位置。

删除原节点后，上方红框中的3.1（对于数据2.1）的行应该消失。但是目前看没有消失，所以猜测是删除操作未生效，于是，先把插入到新位置的第二行代码注释掉，仅执行第一步删除原节点的操作。

然而执行完毕后，发现页面及时更新，节点和子节点已经都被删除了。

那么，也就是说，单独删除没问题，反而在删除之后立即执行插入出现了问题。这就不得不提到Vue中的响应式更新的机制了，它是