問題描述

<p v-for='item in items' :key='item.id'> <!-- 內(nèi)容 --></p>

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

問題解答

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

有相同父元素的子元素必須有獨(dú)特的key。重復(fù)的key會造成渲染錯誤。

最常見的用例是結(jié)合 v-for:

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

它也可以用于強(qiáng)制替換元素/組件而不是重復(fù)使用它。當(dāng)你遇到如下場景時它可能會很有用:

完整地觸發(fā)組件的生命周期鉤子觸發(fā)過渡

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

當(dāng) text 發(fā)生改變時，<span> 會隨時被更新，因此會觸發(fā)過渡。

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

列表渲染某些時候要保證數(shù)據(jù)的唯一性 這個key是唯一標(biāo)識 必須要唯一

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

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

其實(shí)這個東西寫不寫都行 就算你寫錯了他也不會報(bào)錯 但是一般寫for循環(huán)寫上比較好

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