微信小程序笔记 wx:key用法

2020-12-14 09:59:04 阅读：179 来源： 互联网

什么时候用：数组内容会动态改变，要使用wx:key保持项目自己的特征和状态；不使用key的话会整个销毁再创建，导致性能下降

什么时候不需要：数组是静态的不需要改变，不关注顺序，就可以不适用

之前一直不理解wx:key是什么用法，举两个例子。

在没引入wx:key之前

<view wx:for="{{lines}}">
  <switch>{{item.info}}</switch>
</view>
<button bindtap="tapfn">数据更新</button>
//my.js部分
data: {
    lines:[
      {
        id:1,
        info:"萨摩耶"
      },
      {
        id: 2,
        info: "哈士奇"
      },
      {
        id: 3,
        info: "阿拉斯加"
      }
    ]
  },
 
  tapfn:function()
  {
    var lines=this.data.lines
    lines.splice(0,0,{
      id:5,
      info:"田园犬"
    })
    this.setData({
      lines:lines
    })
  },

效果如下：

点击数据更新后

可以看出，这里发生了错误，选择的东西变成了萨摩耶

当我们引入wx:key后，以id作为wx:key

<view wx:for="{{lines}}" wx:key="id">
  <switch>{{item.info}}</switch>
</view>
<button bindtap="tapfn">数据更新</button>

再进行相同的操作

这一次保持了正确，这正是wx:key的效果。

那么，当data字段里面是一个纯数组而不是对象，即没有id可以做wx:key时怎么办呢。下面的例子：

<view wx:for="{{lines}}" wx:key="*this">
  <switch>{{item}}</switch>
</view>
<button bindtap="tapfn">数据更新</button>
//my.js
data: {
    lines:[1,2,3,4]
  },
 
  tapfn:function()
  {
    var lines=this.data.lines
    lines.splice(0,0,5)
    this.setData({
      lines:lines
    })
  },

效果如下：

点击后：

效果正确，所以在对数组对应的wx:key应该是*this

标签：info,微信,lines,key,data,id,wx
来源： https://blog.csdn.net/weixin_45821809/article/details/111150411

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序 笔记 wx:key用法

微信小程序笔记 wx:key用法