key

Vue 官方建議在使用 v-for 時儘量提供 key 屬性，但是我一直都沒寫也沒遇到什麼問題，最近遇到的bug就是因為沒寫key。

問題描述

兩個Select聯動，當第一個Select選項發生變化時第二個Select可選項option隨之變動。但是當一個Select發生變化時，第二個Select的選項並未隨之改變（實際上option的value值已經改變了只是label沒變）。

解決方案

在使用 v-for 的時候提供 key。

原因

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。
這個預設的模式是高效的，但是隻適用於不依賴子元件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。

以上是 key 的主要用法，它還有其他用途：

它也可以用於強制替換元素/元件而不是重複使用它。當你遇到如下場景時它可能會很有用：

• 完整地觸發元件的生命週期鉤子
• 觸發過渡，例如：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

當 text 發生改變時， 會隨時被更新，因此會觸發過渡。