Vue踩坑筆記

v-for

v-for是vue中使用很是頻繁的指令，用於作列表渲染，對於template的代碼優化頗有幫助。下面記錄一些v-for使用中我碰到的坑...

key

key是vue中給dom或者組件添加的標記，有點像js中的id。它是vue中dom的惟一標識，vue是經過比對key來判斷是否須要更新dom的。在使用v-for時，必需要給列表渲染的dom添加一個key以區分他們，不然vue發起一個警告。 通常我使用v-for時是使用的index做爲key的，像這樣

<p v-for=「（item，index）in list」 :key="index">我是列表渲染的p標籤</p>
複製代碼

對於遍歷數組元素是簡單類型時，這麼寫是沒有問題的，可是若是數組元素是複雜類型是（例如：Object），這麼寫就有問題了，當我嘗試修改數組中某個元素時（總體替換），發現dom並無更新，網上查了資料以後發現，是因爲vNode的diff算法中key的比對相同致使vue認爲這裏沒有須要從新渲染的更新。解決辦法時，key使用Object的惟一標識（通常都有id）。 id也不是絕對穩妥的，我在偶然間發現：當我修改複雜類型數組中的某一元素時（修改Object中的某一屬性，該訂單有更新，須要總體替換，可是id是一致的），這個時候我發現，數據源我修改爲功了，可是這個訂單並無更新。解決辦法是使用了後端返回的用於判斷訂單是否有更新的hash值做爲key。