微信小程式 wx:key 在自己學習的時候不是多明白到底是怎麼回事，經過上網查閱資料，整理下：
個人感覺官方給的例 子不是很明確，官方解釋如下：
wx:key
如果清單中項目的位置會動態改變或有新的項目加入到清單中，並且希望清單中的項目保持自己的特徵和狀態（如 中的輸入內容，
wx:key 的值以兩種形式提供
字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是清單中唯一的字串或數字，且不能動態改變。
保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是一個唯一的字串或數字，如：
當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新創建，以確保使群組
件保持自身的狀態，並且提高清單渲染時的效率。
如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或不必關注其順序，可以選擇忽略。
範例程式碼：
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
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
})
}
})
這裡寫下個人的理解，有什麼不對的地方希望大家指正：以
感謝閱讀，希望能幫助大家，謝謝大家對本站的支持！
更多微信小程式 wx:key詳細介紹相關文章請關注PHP中文網！
