Detailed introduction of WeChat applet wx:key

When I was studying the WeChat applet wx:key, 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 given are not very clear. The official explanation is as follows:

wx:key

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

The value of wx:key is provided in two forms

A string represents 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:

When data changes trigger the render layer to re-render, the components with the key will be corrected, and the framework will ensure that they are reordered rather than re-created to ensure that the group is

The widget maintains its own state and improves the efficiency of list rendering.

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: '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
  })
 }
})

Here is my personal understanding. I hope you can correct me if I find anything wrong: Take as an example. If there is no wx:key, when selecting one of the buttons, change its order or add options. When the button is selected, it 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 is true. It is suitable for lists or other tags that can change the order or add items.

Thanks for reading, I hope this helps everyone, and 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!