Vue key的作用

1、v-if中用 key 管理可複用的元素

Vue 會儘可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做，除了使 Vue 變得非常快之外，還有一些有用的好處。例如，如果你允許用戶在不同的登錄方式之間切換:

    <template v-if="loginType === 'username'">  
      <label>Username</label>  
      <input placeholder="Enter your username">  
    </template>  
    <template v-else>  
      <label>Email</label>  
      <input placeholder="Enter your email address">  
    </template>  

那麼在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因爲兩個模版使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。
這樣也不總是符合實際需求，所以 Vue 爲你提供了一種方式來聲明“這兩個元素是完全獨立的——不要複用它們”。只需添加一個具有唯一值的 key 屬性即可：

    <template v-if="loginType === 'username'">  
      <label>Username</label>  
      <input placeholder="Enter your username" key="username-input">  
    </template>  
    <template v-else>  
      <label>Email</label>  
      <input placeholder="Enter your email address" key="email-input">  
    </template>  

現在，每次切換時，輸入框都將被重新渲染。注意, <label> 元素仍然會被高效地複用，因爲它們沒有添加 key 屬性

2、v-for中的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 還具有其他用途，我們將在後面的指南中看到其他用途。