問題描述

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

這個:key怎么用呢 能舉個列子嗎 它僅僅就為了v-for才添加的嗎？：key='value'這個value是任意寫的嗎？

問題解答

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 發生改變時，<span> 會隨時被更新，因此會觸發過渡。

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

列表渲染某些時候要保證數據的唯一性 這個key是唯一標識 必須要唯一

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

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

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

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