問(wèn)題描述

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

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

問(wèn)題解答

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

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

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

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

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

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

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

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

來(lái)源參考： https://cn.vuejs.org/v2/api/#key

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

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

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

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

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