WTF!! Vue数组splice方法没法正常工做

当函数执行到this.agents.splice()时，我设置了断点。发现传参index是0，可是页面上的列表项对应的第一行数据没有被删除，

WTF！！！ 这是什么鬼！而后我打开Vue Devtools, 而后刷新了一下，发现那个数组的第一项仍是存在的

removeOneAgentByIndex: function (index) {
  this.agents.splice(index, 1)
}

而后我就谷歌了一下，发现这个splice not working properly my object list VueJs, 大概意思是v-for的时候最好给列表项绑定:key=。而后我是试了这个方法，发现没啥做用。

最终我决定，单步调试，若是我发现该问题出在Vue自身，那我就该抛弃Vue, 学习React了

单步调试中出现一个异常的状况，removeOneAgentByIndex是被A函数调用的，A函数由websocket事件驱动。正常状况下应该触发一次的事件，服务端却发送了两次到客户端。因为事件重复，第一次执行A删除时，实际上removeOneAgentByIndex是执行成功了，可是重复的第二个事件到来时，A函数又往agents数组中添加了一项。致使看起来，removeOneAgentByIndex函数执行起来彷佛没有设么做用。并且这两个重复的事件是在几乎是在同一时间发送到客户端，因此我几乎花了将近一个小时去解决这个bug。引发这个bug的缘由是事件重复，因此我在前端代码中加入事件去重功能，最终解决这个问题。

我记得以前看过一篇文章，一个开发者调经过回调函数计费，回调函数是由事件触发，可是没想到有时候事件会重发，致使重复计费。后来这名开发者在本身的代码中加入事件去重的功能，最终解决了这个问题。

过后总结：我以为我不应怀疑Vue这种库出现了问题，可是我又不由去怀疑。

经过这个bug, 我也学到了第二方法，能够删除Vue数组中的某一项，参考下面代码。

// Only in 2.2.0+: Also works with Array + index.
removeOneAgentByIndex: function (index) {
  this.$delete(this.agents, index)
}

另外Vue devtools有时候并不会实时的观测到组件属性的变化，即便点了Refresh按钮。若是点了Refresh按钮还不行，那建议你从新打开谷歌浏览器的devtools面板。

最后for循环是很是建议对列表项绑定:key, 这个key应当是固定且惟一的，能够是uuid，或者id。可是千万不要绑定数组的index, 不然就会出现Vue项目中v-for数组删除第n项元素产生渲染错误

// very bad
<li v-for="(item,index) in list" :key="index"></li>


// very good
<li v-for="(item,index) in list" :key="item.id"></li>