小程序wx:key的值各种使用解读复盘

近期重新梳理了一下小程序吧知识点记录在文档里，当笔记，如果你有需要，一起学习吧
:key 必定是在wx:for中使用，它代表着微信的标识，其实就是在页面循环中的制定的循环key值，因为在v层更好的渲染和支持提供。
2.在使用 wx:key的情况下，如果wx:for中的array数据（array指当前item值）发生改变，只是将对应的对象重新排序其实就是数据重写。未发生变化的对象，不会重新创建这样就实现了对应vue的mvvm的数据更新操作相似（这里不多评价，毕竟都有借鉴的痕迹）
:key的取值，首先必定是字符串，然后又分为两种情况
（1）：直接在数组中自己定义值去给wx:key赋值

data: {
    input_data: [
      { id: 1, unique: "one" },
      { id: 2, unique: "two" },
      { id: 3, unique: "three" },
      { id: 4, unique: "four" },
    ]
  }
//
<input value="id:{{}}"   wx:for="{{input_data}}"  wx:key="unique"  />
/*这里注意啊，自己创建伪数据里如果要是数组第一层必须是[],而蹦年是{}要不了就是对象了（自己以前跳过的坑）*/

第一种情况的衍生情况，如果你数组里没有很好的值或者就是想用key值去代替，那这里可以用到保留关键字index

 items: [
      {oa: '37049', name: '张三'},
      {oa: '31094', name: '李四'},
      {oa: '10941', name: '王五'},
      {oa: '84742', name: '赵六'},
      {oa: '18759', name: '周七'},
      {oa: '27694', name: '吴八'},
    ]
 <view class="radio" wx:for="{{items}}" wx:key="index">{{item.oa item.name}}</view>

这里的index是根据sitemap的规则生成的，反正我的理解就是默认的[0]数字键值就像下面这样，如果你的数组懒得再去添加一个专程的键值，这个就是偷懒的好助手在这里插入图片描述
（2）第二种情况，比较少见（我用的比较少），就是保留关键字*this，这里它指的是wx:for循环数组的当前项（item）本身
如果你的数组值只有一个字符串/数字反正默认wx:key是当作字符串读取的，数组例子：items:[1,2,3,4,5,6,7]那么直接用这个就好，但是如果你的值不单单只是一个字符串，而是一个对象，那么谨慎使用要不了会出现以下报错
例子：

 items: [
      {oa: '37049', name: '张三'},
      {oa: '31094', name: '李四'},
      {oa: '10941', name: '王五'},
      {oa: '84742', name: '赵六'},
      {oa: '18759', name: '周七'},
      {oa: '27694', name: '吴八'},
    ]
 <view class="radio" wx:for="{{items}}" wx:key="*this">{{item.oa item.name}}</view>

在这里插入图片描述
所以要谨慎使用
4.这里提一嘴自己跳过的坑
无论是*this还是index用的时候
错误案例：
wx:key="{{*this}}"/wx:key="{{index}}"
正确案例：
wx:key="*this"/wx:key="index"
接下来我还会继续复盘自己以前的小程序的坑希望共同进步

秒客网

小程序wx:key的值各种使用解读复盘

相关文章