javascript - vue 2.0 :key的作用

Question

<p v-for="item in items" :key="item.id">
<!-- 內容 -->
</p>

這個:key怎麼用呢 能舉個列子嗎 它只是為了v-for才加的嗎？ ：key="value"這個value是任意寫的嗎？

Answer 1

key 的特殊屬性主要用在 Vue的虛擬DOM演算法，在新舊nodes比較時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的演算法。使用key，它會基於key的變化重新排列元素順序，並且會移除key不存在的元素。

有相同父元素的子元素必須有獨特的key。重複的key會造成渲染錯誤。

最常見的用例是結合 v-for:

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

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

完整地觸發組件的生命週期鉤子
觸發過渡

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

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

來源參考： https://cn.vuejs.org/v2/api/#key

Answer 2

列表渲染某些時候要保證資料的唯一性 這個key是唯一識別 必須要唯一

Answer 3

這裡的key 是不是在更新列表數據時，第一點：如果數據更新的有相同的數據就會直接利用key去渲染，如果沒有相同的數據，就對比key，因為key不相同，所以這些新的資料要重新渲染，不然的話，vue就利用就地原則直接利用已有的資料來渲染，造成資料沒有達到預期的效果，而是原來的dom的樣式和元件，達不到更新呢？我不知道我的理解對不對，但是官網上說input必須要有key但是我發現有沒有key效果都是一樣的，不知道有沒有大神能給我舉個例子，在下不勝感激！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！

Answer 4

上面說的太過於官方話 白話說你好理解 也就是提高循環性能

其實這個東西寫不寫都行 就算你寫錯了他也不會報錯 但是一般寫for循環寫上比較好

Answer 5

建議多看下文件：
http://cn.vuejs.org/v2/guide/...