今天寫微信小程序無意中看到控制台給出了這樣一行提示:
求解百度才知道,給大家分享一下:
1.wx:for定義
官方文檔:在組件上使用 wx:for
控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。
默認數組的當前項的下標變量名默認為 index
,數組當前項的變量名默認為 item
人話:根據已有數據來迭代生成組件的一個方法。學前端的同學肯定不會陌生了,V-for、ng-repeat都是一樣的原理,可是在這里為什么會報錯呢,往下看
2.wx:key定義
官方文檔:如果列表中項目的位置會動態改變或者有新的項目添加到列表中,並且希望列表中的項目保持自己的特征和狀態(如 input 中的輸入內容,switch 的選中狀態),需要使用 wx:key
來指定列表中項目的唯一的標識符。
wx:key
的值以兩種形式提供
- 字符串,代表在 for 循環的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字符串或數字,且不能動態改變。
- 保留關鍵字
*this
代表在 for 循環中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數字,如:
當數據改變觸發渲染層重新渲染的時候,會校正帶有 key 的組件,框架會確保他們被重新排序,而不是重新創建,以確保使組件保持自身的狀態,並且提高列表渲染時的效率。
如不提供 wx:key
,會報一個 warning
, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。
人話:wx:key是用來告訴程序按照某個key去排序這個組件,例如wx:key="Id",此時組件順序就會按照你arr中Id值來進行排序了(注意此時的Id是唯一切不能動態改變的,也是你要迭代對象中唯一的一個標識符)。而如果沒有這個wx:key的話,當渲染時框架會去查找這個"key",造成資源的浪費。
3.wx:key=" *this
"
相信大家對這個也是一頭霧水,我的理解它就是告訴wx,用我自身(this關鍵字不用解釋了吧!)作為這個key來進行迭代,當然,此時要求你自身是唯一的數字或者字符串(就是不能為對象,不然讓人家咋找)。
總結:
1.需要wx:key
的情況
- 列表中項目的位置會動態改變或者有新的項目添加到列表中
- 希望列表中的項目保持自己的特征和狀態
(如 <input/> 中的輸入內容,<switch/> 的選中狀態)
2.可不需要wx:key
的情況
如果明確知道該列表是靜態,或者不必關注其順序,可以不用加wx:key