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面板。