微信小程序wx:key以及wx:key=" *this"詳解:


今天寫微信小程序無意中看到控制台給出了這樣一行提示:

求解百度才知道,給大家分享一下:

1.wx:for定義

官方文檔:在組件上使用 wx:for 控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。

默認數組的當前項的下標變量名默認為 index,數組當前項的變量名默認為 item

人話:根據已有數據來迭代生成組件的一個方法。學前端的同學肯定不會陌生了,V-for、ng-repeat都是一樣的原理,可是在這里為什么會報錯呢,往下看

2.wx:key定義

官方文檔:如果列表中項目的位置會動態改變或者有新的項目添加到列表中,並且希望列表中的項目保持自己的特征和狀態(如 input 中的輸入內容,switch 的選中狀態),需要使用 wx:key 來指定列表中項目的唯一的標識符。

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

  1. 字符串,代表在 for 循環的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字符串或數字,且不能動態改變。
  2. 保留關鍵字 *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的情況

  1. 列表中項目的位置會動態改變或者有新的項目添加到列表中
  2. 希望列表中的項目保持自己的特征和狀態
    (如 <input/> 中的輸入內容,<switch/> 的選中狀態)

2.可不需要wx:key的情況

如果明確知道該列表是靜態,或者不必關注其順序,可以不用加wx:key


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM