关于Vue的就地复用

这是第一次使用博客，就是想来记录一下自己碰到的一些问题以及解决方法，各位看官随意。

之前做项目的时候，要求对elementui的表格做拖拽排序，拖拽要做成只能通过拖拽最后一列的标记才能够拖动整条数据，比如这样：



就是说只能通过拖拽属性排序来进行移动，当你拖拽其他地方，你不能够拖动，我用了sortable来实现，但是当我实现这个功能以后，我每次进行拖拽，拖拽结束后会重新渲染一次表格，每次你渲染页面的时候因为都要调用一次那个渲染页面的接口，我在那个渲染列表的方法中每次都清空一下整张table表格，所以导致整张表格都会肉眼可见的刷新一遍重新对数据做一次排序，那时候很苦恼，因为这样用户体验太差了，而且很丑，后来发现自己犯了一个低级错误，就是你渲染页面是对的，但是你并不需要清空整张表格来对它重新排序，因为每条数据的row-key是标识符ssid,我给了elementui的table每一行的唯一关键字给成了id,就是这段代码：



我一开始给成了row-key=“id”,所以会导致你如果不清空整张表格，就无法重新渲染列表，这错误就涉及到vue的就地复用，啥叫vue的就地复用？

其实我上网搜了一下，并没有特别官方的语句，所涉及到的关键应该是key，下面这段话我觉得有用：

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes（虚拟节点）。

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。

使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素

就是因为我key没给正确，导致了这个问题，只要我key给正确了，不需要清空table的情况下，它会自己重新排列元素数据。这样就不会出现拖拽重新刷新table的问题了。