Подробное объяснение wx:key в WeChat Mini Program

微信小程序 wx:key Когда я учусь, не всегда明白到底是怎么回事，после исследования материалов в Интернете, собрал следующее:

　 Лично я считаю, что примеры, данные официальной документацией, не очень ясны, официальное объяснение是这样的:

wx:key

Если положение элементов списка будет динамически изменяться или если в список будут добавляться новые элементы, и если нужно, чтобы элементы списка保持了 свои характеристики и состояние (например, содержимое input, состояние выбора switch), необходимо использовать wx:key для указания уникального идентификатора элементов списка.

Значение wx:key предоставляется в двух формах

Строка, представляющая property item в массиве цикла for, значение этой property должно быть уникальным строкой или числом в списке и не должно изменяться динамически.

Сохранение ключевых слов *this означает, что в цикле for используется само значение item, такое представление требует, чтобы item был уникальной строкой или числом, например:

当数据改变触发渲染层重新渲染时，会校正带有 key 的组件，框架会确保它们被重新排序，而不是重新创建，以确保组

组件保持自身的状态，并且提高列表渲染时的效率。

如果未提供 wx:key，则会显示一个警告，如果明确知道该列表是静态的，或者不必关注其顺序，可以选择忽略。

示例代码：

<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
  
 

Вот мое личное понимание, если что-то не так, пожалуйста, исправьте: например, с <switch></switch>, если нет wx:key, при выборе одной из кнопок, изменении их порядка или добавлении вариантов, выбранная кнопка не будет следовать за изменением порядка предыдущей кнопки, она всегда будет на фиксированном месте, если есть wx:key, то наоборот, это подходит для списков или других тегов, которые могут изменять порядок или добавлять элементы

Спасибо за чтение, надеюсь, это поможет вам, спасибо за поддержку нашего сайта!