當函數執行到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>