v-for循環(huán)表單瘸恼，刪除一行后數(shù)據(jù)并沒(méi)有被刪除(對(duì)于我遇到的坑簡(jiǎn)單粗暴的描述)。我是一個(gè)在v-for循環(huán)中從來(lái)不寫(xiě)key并且一直沒(méi)有遇到坑的人册养，直到今天...
遇到的坑
是這樣的东帅！tr我是v-for循環(huán)的一個(gè)數(shù)組，這個(gè)數(shù)組里面是一個(gè)個(gè)行標(biāo)識(shí)（見(jiàn)圖二）球拦，每一行的內(nèi)容（日期）是用戶填寫(xiě)的靠闭。填寫(xiě)后保存到一個(gè)json里面。然而我刪除其中一行時(shí)坎炼，對(duì)應(yīng)的行標(biāo)識(shí)消失愧膀，行數(shù)也減一，但是刪除的那一行填寫(xiě)的日期并不會(huì)消失谣光，消失的日期是最后一行檩淋。看上去像是刪掉了最后一行萄金。
解決方法：
查閱大量資料終于找到問(wèn)題出現(xiàn)在：key上蟀悦。應(yīng)該賦予tr一個(gè)獨(dú)一無(wú)二的key才能識(shí)別填入的數(shù)據(jù)和行標(biāo)識(shí)數(shù)組的關(guān)系碳柱。于是乎我就把獨(dú)一無(wú)二的行標(biāo)識(shí)添加到了：key中。大功告成熬芜！
原理解析：
虛擬DOM的Diff算法：
兩個(gè)相同的組件產(chǎn)生類似的DOM結(jié)構(gòu)莲镣，不同的組件產(chǎn)生不同的DOM結(jié)構(gòu)。
同一層級(jí)的一組節(jié)點(diǎn)涎拉，他們可以通過(guò)唯一的id進(jìn)行區(qū)分嘹吨。
如果節(jié)點(diǎn)類型不同巷帝，直接干掉前面的節(jié)點(diǎn)，再創(chuàng)建并插入新的節(jié)點(diǎn)，不會(huì)再比較這個(gè)節(jié)點(diǎn)以后的子節(jié)點(diǎn)了橡伞。
如果節(jié)點(diǎn)類型相同，則會(huì)重新設(shè)置該節(jié)點(diǎn)的屬性昼蛀，從而實(shí)現(xiàn)節(jié)點(diǎn)的更新雀瓢。
由于沒(méi)有這個(gè)key此算法一定是認(rèn)為是相同的類型了，于是乎出現(xiàn)了上面錯(cuò)位的效果酌住。
最后：大家還是養(yǎng)成v-for寫(xiě)：key的好習(xí)慣吧店归，以前我是有這個(gè)習(xí)慣的，后來(lái)發(fā)現(xiàn)也出不了什么事酪我，就不寫(xiě)了消痛。
詳情見(jiàn)Vue2.0 v-for 中 :key 到底有什么用？
