vue的key值引起渲染錯位的血案

原本小程序都已經完成的幾乎完美了，昨天市場部的小夥伴拿去測試，過了一下子又扔給我一張圖上面寫着密密麻麻的問題，能夠說是把我嚇得夠嗆，結果看完了以後發現都是問卷數據的問題，本想着這些都與我無瓜了，可是不當心瞟到一眼好幾個地方出現了選項錯位的問題，本身拿來一測發現真的是這樣的。

問題就在於根據一道題級聯出許多類型的題，當我按照順序點擊那道特定的題的時候不會出現錯位的狀況，可是當我反着順序來的時候就會出現錯位的現象

進一步打印信息發現，其實我在子組件中拿到的數據就已是錯誤的信息了，可是我在父組件打印的時候倒是正確的，因此問題究竟出在哪裏呢？

通過一下午的百度，彷佛並無找到好的解決方案，晚上回去了問室友室友說多是由於key致使的，我就以爲不對啊，不是key值惟一嗎，我用的是index不該該會有問題啊，事實證實我果真是個新人理解不夠透徹，我把key值改爲惟一的id渲染就正常了！！！

問題是index不是惟一的嗎？因而今天我就去搜了一下這個問題。

原來實際上是不推薦使用下標來作key值的，這其實只是咱們以爲他惟一，其實並非，他只是每次按照這個index去從新渲染，若是咱們在要渲染的數組中插入一條新數據，就會由於index而直接將全部的數據都從新渲染，顯然這樣從性能上來說也是很差的。這個時候的index就跟原來的位置出現了誤差，也就致使了個人錯位問題，這個緣由就要說到框架底層使用的diff算法了，這跟react是同樣的。

其核心在於：

1. 兩個相同的組件產生相似的DOM結構，不一樣的組件產生不一樣的DOM結構

2. 同一層級的一組節點，他們能夠經過惟一的id進行區分。基於以上這兩點假設，使得虛擬DOM的Diff算法的複雜度從O()降到了O(n)

什麼意思呢？下面這張圖就表達的更爲清楚一些

咱們要探討的就是同一層級的不一樣節點，由於diff算法的默認狀況是從左往右一個一個的去找到你要的位置，這樣的效率是十分底下的

 --->

所以就會須要一個惟一的key值標識來讓diff算法直接找到正確的位置插入新的節點，這個時候也就說明了index是不合適的，由於他的默認算法自己就是根據index來來尋找位置的，所以key值若是給的是index實際上是沒有意義的。

總之通過此次的踩坑，之後我就不再用index來作key值了，誰知道何時會忽然出點莫名其妙的錯