微信小程序属性剖析：wx-key就这么重要吗？flyingmeng的菜鸟居-

今天，就想和各位说说微信小程序中的【臂膀】——wx-key。

毫无疑问，wx-key在微信小程序中可谓是“大出风头”，这一点尤其在for循环中体现出来。但wx-key的作用，你真的了解吗？

事实上，作为“唯一标识”，微信小程序也极力提倡在一些组件中使用

我们先来写一个简单的list列表：

//wxml <block wx:for="{{arr}}"> <view>{{item}}</view> </block> //js-data data:{  arr:['wxml','js','wxss','json'] }, 

现在，我们给它加上索引：

//wxml <block wx:for="{{arr}}"> <view>{{index}}-{{item}}</view> </block> 

微信小程序for循环默认每一项是一个“item”，默认每一项的索引为“index”。
当然，也可以通过wx:for-item重新设置（每一项的名称）。

上面是wx-for循环的使用，
为了更好的展示wx:key的作用，我们给每一项前面加个【复选框】，并增加一个button按钮用来对list进行“随机排序”：

//wxml <block wx:for="{{arr}}" wx:for-item="data"> <view><checkbox />{{data}}</view> </block> <button bindtap="sort">随机排序</button> 

//js-随机排序代码（本文所有“随机排序”皆用此代码） sort(){ const len=this.data.arr.length  for(let i in this.data.arr){ let x=Math.floor(Math.random()*len) let y=Math.floor(Math.random()*len) let temp=this.data.arr[x] this.data.arr[x]=this.data.arr[y] this.data.arr[y]=temp  } this.setData({   arr:this.data.arr  }) }, 

重点来了，现在我随机勾选两项，然后按下button按钮：

我们会“惊恐”的发现：不管怎样，选中的都是“第二项”和“第四项”；但显然，我们希望选中的只是最开始“第二项”和“第四项”对应的数据！

其实，这无疑是“数据优先”的一个特点：从始至终我们都在操控数据，而无关结构

当然，这也是wx:key的作用之一：

正式篇：wx:key的解析

可能有的初学者会发现，有的地方完全“没必要”加上wx:key，而有的地方却必须要用？
这是【数据项是否发生变化】的区别。

所谓key —— 钥匙。正如“一把钥匙对应一把锁”。当一个数据项需要保证（持）他自己的【特征】，或者说【状态】时，才需要为其添加“key属性”。

我们改写一下上面的代码：

//wxml <block wx:for="{{arr}}" wx:for-item="data" wx:key="{{index}}"> <view><checkbox />{{data}}</view> </block> <button bindtap="sort">随机排序</button> 

前面说过，微信中for循环默认每一项“下标”用index显示。
然后我们会发现：毫无作用。

是key坏了么？
还是不应该加index？
但是不是说为每一项加一个“唯一标识”就行么，难道下标不是？

其实还真不行：“前面说了，for循环索引是index” —— 坏就坏在这句话上：索引本来就是“不变的”啊。

这么说吧：比如这里的arr数组，索引永远是0、1、2、3，哪怕元素改变了，下标却并不“被携带”。
这有点像什么呢？
“索引是数组为元素（位置）定下的索引，而不是元素的索引”

遇见这种情况我们就需要用到另一个关键字 —— *this，用于小程序的for循环中，作为“指针”指向每一项自身：

//wxml <block wx:for="{{arr}}" wx:for-item="data" wx:key="*this"> <view><checkbox />{{data}}</view> </block> <button bindtap="sort">随机排序</button> 

现在就可以了！

由此可见：key属性必须是“关乎数据项自身的”、“独一无二的”。

我们不妨来看另一种情况，把数据变“复杂”一些：

//js-data data:{  arr:[{   id:1,   name:'wxml' },{   id:2,   name:'js' },{   id:3,   name:'wxss' },{   id:4,   name:'json' }] }, 

好吧，现在又回到“解放前”。
不过有了上面的经验，我们知道：这是key不到位的缘故；
但现在数据项变成了一个一个的对象了，还能和以前一样吗？

是的。但是我们的数据中已经有了“唯一性表示” —— id了，又何必“舍近求远”呢？

//wxml <block wx:for="{{arr}}" wx:for-item="data" wx:key="{{id}}"> <view><checkbox />{{data}}</view> </block> <button bindtap="sort">随机排序</button>