v-for key
阿新 • • 發佈：2017-10-25
錯亂 item 匹配 順序 mar pan bsp string key值
key
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。
這個默認的模式是高效的，但是只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。這個特殊的屬性相當於 Vue 1.x 的 track-by
v-bind 來綁定動態值 (在這裏使用簡寫)：
| <div v-for="item in items" :key="item.id"> <!-- 內容 --> </div> |
建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。
因為它是 Vue 識別節點的一個通用機制，key 並不與 v-for 特別關聯，key 還具有其他用途，我們將在後面的指南中看到其他用途。
————————————————————————————————————————————————————————————
在開發時，遇到刪除v-for渲染的內容時，內容錯亂的問題。
原因就是因為沒有綁定key值。
需要綁定。
且唯一，不變。
貌似還會對渲染動畫有影響，先mark，遇到再說。
v-for key