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>

轉載于:https://www.cnblogs.com/RainyBear/p/8563101.html

總結

以上是生活随笔為你收集整理的vue中key的作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。