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

今天，就想和各位说说微信小程序中的【臂膀】——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.lengthfor(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>

微信小程序属性剖析：wx-key就这么重要吗？相关推荐

[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
微信小程序-bug-调用wx.login()无响应的原因和解决方案
微信小程序-bug-调用wx.login()无响应的原因和解决方案参考文章: (1)微信小程序-bug-调用wx.login()无响应的原因和解决方案 (2)https://www.cnblogs. ...
微信小程序地理位置接口( wx.getLocation )申请方法
在平时我们在开发小程序时,难免会需要用到用户的地理位置信息的功能,微信小程序开发者开放平台新规要求如果没有申请开通微信小程序地理位置接口( wx.getLocation ),是无法审核通过小程序的. ...
微信小程序 | 如何使用wx.request发送文件？
微信小程序不提供fromdata对象,以至于提交的表单里面没有办法包含文件,只能提交表单里面的文本字段,找了一下发现有大佬造好了轮子: https://github.com/zlyboy/wx-for ...
微信小程序——提示弹窗wx.showModal
微信小程序里面的提示框实现,先来张示例图: 先在.wxml里面写好布局文件,这里拿删除按钮作为示例: <view class="buttonVie ...
一分钟搞定微信小程序定位（wx.getLocation）功能
欢迎大家来到我的一分钟系列,跟大家安利一分钟系列主要让大家快速完成一个功能少踩不必要的坑,先完成功能再悟其中的原理. 这期主要为大家提供微信小程序的定位功能.换不多说,直接上干货. 首先微信官方提供的 ...
微信小程序-音频播放-wx.createInnerAudioContext() 每次都是重复播放同一条录音
前言在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
微信小程序下载文件wx.saveFile
//*注:wx.saveFile下载的文件只可以微信小程序内部访问,不可做外部访问 downloadFile: function(e) {wx.showLoading({title: '下载中...' ...

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

正式篇：wx:key的解析

微信小程序属性剖析：wx-key就这么重要吗？相关推荐

最新文章

热门文章