最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 微信小程序wx:key做什么用?

    wx:key主要作用于有数据改变或则有新的项目添加进来,并且原来的列表中的项目需要保持原来的状态。只有重新渲染的时候,才会看出有无wx:key的差别。

    官方文档的描述:

    如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
    

    什么时候需要填写wx:key?

    1.列表中项目的位置会动态改变或者有新的项目添加到列表中

    2.希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态)

    这些情况需要使用 wx:key 来指定列表中项目的唯一的标识符。

    简单的理解其中的差别

    写了key的情况:

    在数据改变或者新项目添加后,相当于不会重新被渲染到,之前的什么样还是什么样,值还有自身状态不变。有改变就是位置顺序发生下改变。就像网页ajax加载新数据,之前的不变。这样重新渲染的效率就高了。

    没有写key的情况:

    在数据改变或者新项目添加后,相当于全部清空,全部重新渲染了。像网页重新刷新了一样,都变成原始状态。

    wx:key 的值以两种形式提供

    1.字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。

    2.保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。

    举例

    Page({
      data: {
        objectArray: [
          {id: 5, unique: 'unique_5'},
          {id: 4, unique: 'unique_4'},
          {id: 3, unique: 'unique_3'},
          {id: 2, unique: 'unique_2'},
          {id: 1, unique: 'unique_1'},
          {id: 0, unique: 'unique_0'},
        ],
        numberArray: [1, 2, 3, 4]
      }
    
    上述的第一种形式:取的是objectArray数组中的unique的值
    <switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
    
    上述的第二种形式:取的是numberArray数组中的本身的值
    <switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
    

    不填写wx:key的情况

    明确知道该列表是静态,或者不必关注其顺序

    如不提供 wx:key,会报一个 warning,可以选择忽略。

    免责需知
    1、本站所有资源均来源于网络收集,一切版权©归原作者所有,请保留原版权信息。
    2、本站分享仅供参考学习和演示,禁止商用,如需商用,请从正规渠道选择购买正版!使用正版!支持正版!维护一个良好的知识产权环境。
    3、内容故是参考与学习,不确保能正常演示,也不包含其中的技术服务。
    4、排除在某个功能上存在有其它的BUG或源码残缺的可能,购买后一率不能退款。
    5、资源下载不含技术服务,需付费安装请联系客服100元/次。
    6、文件储存在网盘,如发现链接或者密码有误,请联系客服。
    7、如果付款后下载不了,请提交工单说明,客服会在24小时内解决,如果解决不了,会为您退款。
    8、侵权反馈邮箱:yutongyuncom@qq.com
    顺风猫 » 微信小程序wx:key做什么用?

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    顺风猫
    一个高级程序员模板开发平台