Detailed introduction of WeChat applet wx:key

WeChat Mini Program wx:key When I was studying, I didn’t quite understand what was going on. After checking the information online, I sorted it out:

Personally, I feel that the official examples are not very clear. The official explanation As follows:

wx:key

If the position of the items in the list will change dynamically or new items are added to the list, and you want the items in the list to remain their own Characteristics and states (such as the input content in , the selected state of ), you need to use wx:key to specify the unique identifier of the item in the list.

wx:key The value is provided in two forms

String, representing a property of the item in the array of the for loop, the value of the property needs to be The only string or number in the list and cannot be changed dynamically.

The reserved keyword *this represents the item itself in the for loop. This representation requires the item itself to be a unique string or number, such as:

Triggered when the data changes When the rendering layer re-renders, components with keys will be corrected, and the framework will ensure that they are reordered rather than re-created to ensure that the components

maintain their own state and improve the performance of list rendering. efficiency.

If wx:key is not provided, a warning will be reported. If you know clearly that the list is static, or you do not need to pay attention to its order, you can choose to ignore it.

Sample code:

<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: &#39;unique_5&#39;},
   {id: 4, unique: &#39;unique_4&#39;},
   {id: 3, unique: &#39;unique_3&#39;},
   {id: 2, unique: &#39;unique_2&#39;},
   {id: 1, unique: &#39;unique_1&#39;},
   {id: 0, unique: &#39;unique_0&#39;},
  ],
  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: &#39;unique_&#39; + 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
  })
 }
})

Write down my personal understanding here. I hope you can correct me if there is anything wrong: Take as an example. If not wx:key, when you select one of the buttons, change its order or add options, the selected button will not follow the previous button to change the order, and will always be in a fixed position. If there is wx:key, the opposite will be true. , suitable for lists or other tags that can change the order or add items

Thanks for reading, I hope it can help everyone, thank you for your support of this site!

For more WeChat applet wx:key detailed introduction and related articles, please pay attention to the PHP Chinese website!