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>