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> 

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>