總是用?`key`?配合?`v-for`。 ~~~ // 好例子 <ul> <li v-for="todo in todos" :key="todo.id" > {{ todo.text }} </li> </ul> ~~~ 在組件上*總是*必須用?`key`?配合?`v-for`，以便維護內部組件及其子樹的狀態。甚至在元素上維護可預測的行為，比如動畫中的[對象固化 (object constancy)](https://bost.ocks.org/mike/constancy/)，也是一種好的做法。 #### 詳解 假設你有一個待辦事項列表： ~~~ data: function () { return { todos: [ { id: 1, text: '學習使用 v-for' }, { id: 2, text: '學習使用 key' } ] } } ~~~ 然后你把它們按照字母順序排序。在更新 DOM 的時候，Vue 將會優化渲染把可能的 DOM 變動降到最低。即可能刪掉第一個待辦事項元素，然后把它重新加回到列表的最末尾。 這里的問題在于，不要刪除仍然會留在 DOM 中的元素。比如你想使用?`<transition-group>`?給列表加過渡動畫，或想在被渲染元素是?`<input>`?時保持聚焦。在這些情況下，為每一個項目添加一個唯一的鍵值 (比如?`:key="todo.id"`) 將會讓 Vue 知道如何使行為更容易預測。 根據我們的經驗，最好*始終*添加一個唯一的鍵值，以便你和你的團隊永遠不必擔心這些極端情況。也在少數對性能有嚴格要求的情況下，為了避免對象固化，你可以刻意做一些非常規的處理。 ~~~ // 反例 <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> ~~~