詳解小程式開發之wx:key

這篇文章主要介紹了微信小程式wx:key詳細介紹的相關資料,並附簡單程式碼實例，幫助大家學習理解，需要的朋友可以參考下

微信小程序wx:key 在自己學習的時候不是多明白到底是怎麼回事，經過上網查閱資料，整理下：

  個人感覺官方給出的例子不是很明確，官方解釋如下：

wx:key

如果清單中項目的位置會動態改變或有新的項目新增到清單中，並且希望清單中的項目保持自己的特徵和狀態（如0f0306f9b187f2e363126bc29c8b1420 中的輸入內容，698d939a2c9041f2302734cfeb04788e 的選取狀態），需要使用wx:key 來指定清單中項目的唯一的識別碼。

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

字串，代表在for 循環的array 中item 的某個property，該property 的值需要是清單中唯一的字串或數字，且不能動態改變。

保留關鍵字*this 代表在for 迴圈中的item 本身，這種表示需要item 本身是一個唯一的字串或數字，如：

當資料改變觸發渲染層重新渲染的時候，會校正帶有key 的元件，框架會確保他們被重新排序，而不是重新創建，以確保使組

件保持自身的狀態，並且提高清單渲染時的效率。

如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

範例程式碼：

 {{item.id}} 
 Switch 
 Add to the front 

 {{item}} 
 Add to the front 
Page({
 data: {
  objectArray: [
   {id: 5, unique: 'unique_5'},
   {id: 4, unique: 'unique_4'},
   {id: 3, unique: 'unique_3'},
   {id: 2, unique: 'unique_2'},
   {id: 1, unique: 'unique_1'},
   {id: 0, unique: 'unique_0'},
  ],
  numberArray: [1, 2, 3, 4]
 },
 switch: function(e) {
  const length = this.data.objectArray.length
  for (let i = 0; i < length; ++i) {
   const x = Math.floor(Math.random() * length)
   const y = Math.floor(Math.random() * length)
   const temp = this.data.objectArray[x]
   this.data.objectArray[x] = this.data.objectArray[y]
   this.data.objectArray[y] = temp
  }
  this.setData({
   objectArray: this.data.objectArray
  })
 },
 addToFront: function(e) {
  const length = this.data.objectArray.length
  this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
  this.setData({
   objectArray: this.data.objectArray
  })
 },
 addNumberToFront: function(e){
  this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
  this.setData({
   numberArray: this.data.numberArray
  })
 }
})

這裡寫下個人的理解，有什麼不對的地方希望大家指正：以a1ff05a56cf2f5a66451895cefc9a72f4cfc40e017beed9e13939e19a179680a為例，如果沒有wx:key，選中其中的某個按鈕的時候，改變其順序或添加選項的時，選中的按鈕時不回跟隨上個按鈕改變順序的，會一直在固定位子，如果有wx:key則相反，適用於列表或其他標籤可以改變順序或添加項目的情況

【相關推薦】

1 . 微信小程式完整原始碼

2. 追格微信小程式應用程式商店

#

以上是詳解小程式開發之wx:key的詳細內容。更多資訊請關注PHP中文網其他相關文章！