http://www.sohu.com/a/207728111_99897596

如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如 如 input 中的輸入內(nèi)容，switch 的選中狀態(tài)），需要使用 wx:key 來指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

在開發(fā)過程中，wx:key的作用對(duì)于項(xiàng)目作用是非常大的，如果從文字上無法理解的童鞋，可以到github clone demo到微信開發(fā)工具里，親自體驗(yàn)下。

wx:key 的值以兩種形式提供

字符串，代表在 for 循環(huán)的 array 中 item 的某個(gè) property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動(dòng)態(tài)改變。

保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個(gè)唯一的字符串或者數(shù)字，如：

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

如不提供 wx:key，會(huì)報(bào)一個(gè) warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。

我們看到這個(gè)GIF動(dòng)畫圖，這里有一個(gè)switch的開啟狀態(tài)，switch的狀態(tài)是在標(biāo)題為羔羊排骨一條的，在對(duì)這個(gè)數(shù)組增加數(shù)據(jù)時(shí)，這個(gè)switch的狀態(tài)并不跟隨著羔羊排骨一條，并不保持自己的狀態(tài)。

那我們?cè)倏戳硪粋€(gè)例子，使用了wx:key唯一標(biāo)識(shí)符。

這個(gè)GIF動(dòng)畫圖，也是點(diǎn)擊開啟了switch的狀態(tài)，唯一有不同的地方，就是在新增數(shù)據(jù)時(shí)，是保持著自己的狀態(tài)的。

相信通過這兩個(gè)小例子，對(duì)wx:key唯一標(biāo)識(shí)符應(yīng)該也有所了解啦，想要提升技術(shù)，就要多折騰，自己在小程序里，寫個(gè)wx:for 和 wx:key 體會(huì)下。

還有一個(gè)需要注意的地方，我們先看看以下代碼

<view class="pad10" wx:for="{{twoList}}" wx:key="id">

</view>

wx:key="id"，我們看到wx:key里的值并不需要花括號(hào)的，是的，這里是比較特別的地方，不需要花括號(hào)，同時(shí)也不需要參數(shù)名，需要是數(shù)據(jù)里的一個(gè)字段名

以上是由福州網(wǎng)站建設(shè)的小編為你分享了"微信小程序wx:key的使用"文章，如果你在這方面有什么問題，隨時(shí)聯(lián)系我們