小程序：详解wx:for和wx:key | 张先生的网络日志

微信官方文档对wx:key的解释：

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供wx:key，会报一个warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

我对wx:key的理解:

在循环列表中加入wx:key=’key’属性，相当于指明列表中每一项的唯一标识符，当每一个列表项都拥有唯一标识符时，列表项的当前状态在重新渲染列表时可以被保存（如：对列表项进行添加或删除操作）。

下面的例子中，我指定wx:key=”id”，则列表数据中的id值作为列表项的唯一标识符，当我对此列表进行增删改操作时，列表项的状态被保留。

data:

data: {
    radio:[
        {
            'id':'1',
            'value': '1',
            'title':'选项1'
        }, 
        {
            'id':'2',
            'value': '2',
            'title':'选项2'
        },
        {
            'id':'3',
            'value': '3',
            'title':'选项3'
        } 
    ]
}

data: {

radio:[

{

'id':'1',

'value': '1',

'title':'选项1'

{

'id':'2',

'value': '2',

'title':'选项2'

{

'id':'3',

'value': '3',

'title':'选项3'

}

]

}

列表:

<view wx:for='{{radio}}' wx:key='id' class='radio'>
    <radio data-index='{{item.id}}' value='{{item.value}}'>{{item.title}}</radio>
</view>

<radio data-index='{{item.id}}' value='{{item.value}}'>{{item.title}}</radio>

</view>

完整代码：

wxml:

<page>
  <view class='radio-box'>
    <form>
      <radio-group bindchange="choose">
        <view wx:for='{{radio}}' wx:key='id' class='radio'>
          <radio data-index='{{item.id}}' value='{{item.value}}'>{{item.title}}</radio>
        </view>
      </radio-group>
      <view>
        <button class='radio-btn' bindtap='additem'>增加一项</button>
        <button class='radio-btn' bindtap='delitem'>删除第一项</button>
      </view>
    </form>
  </view>
</page>

<page>

<form>

<radio-group bindchange="choose">

<radio data-index='{{item.id}}' value='{{item.value}}'>{{item.title}}</radio>

</view>

</radio-group>

<view>

<button class='radio-btn' bindtap='delitem'>删除第一项</button>

</view>

</form>

</view>

</page>

js:

Page({
  data: {
    radio:[
      {
        'id':'1',
        'value': '1',
        'title':'选项1'
      }
    ]
  },
  choose:function(e){
    console.log(e.detail.value)
  },
  additem:function(){
    console.log('增加')
    var cdata = this.data.radio
    var len = cdata.length + 1
    var newdata = {
      'id': len,
      'value': len,
      'title': '选项' + len
    }
    cdata = cdata.concat(newdata)
    this.setData({
      radio:cdata
    })
  },
  delitem: function (){
    var cdata = this.data.radio
    cdata.splice(0,1)
    this.setData({
      radio: cdata
    })
  }
})