微信小程序 wx:key 提示-解決

在實際開發過程當中遇到 warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.

上網查找資料與查看官方文檔發現緣由大體以下：

 

官方解釋：

wx:key

若是列表中項目的位置會動態改變或者有新的項目添加到列表中，而且但願列表中的項目保持本身的特徵和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），須要使用 wx:key 來指定列表中項目的惟一的標識符。

網上資料：

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

一、wx:key="property" 其中property是表明在 for 循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變。相似於字典的key值

二、wx:key="*this"， 保留關鍵字 *this 表明在 for 循環中的 item 自己，這種表示須要 item 自己是一個惟一的字符串或者數字，如：

當數據改變觸發渲染層從新渲染的時候，會校訂帶有 key 的組件，框架會確保他們被從新排序，而不是從新建立，以確保使組

件保持自身的狀態，而且提升列表渲染時的效率。

 

不添加wx:key狀況：

<block wx:for-items="{{userInfoList}}" >，會出現warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance. 若是明確知道該列表是靜態，或者沒必要關注其順序，能夠選擇忽略。

 

推薦array 的 每個item都添加一個惟一識別的property來管理，這樣就能夠去掉warning，若是使用保留關鍵字，好像會出現顯示的item都是最後一個的

<block wx:for-items="{{userInfoList}}" wx:key="userInfoListId"或者 wx:key="{{index}}">