小程序开发警告：Now you can provide attr `wxkey` for a `wxfor` to improve performance解决指南

小程序开发警告：Now you can provide attr `wx:key` for a `wx:for` to improve performance解决指南

一、用法说明

wx:key 属性的值是一个字符串。它是列表项中一个属性的名称（假如每个列表项是一个字典），该名称是每个列表项（字典）的唯一标识符。用法类下：

<view wx:for="{{data}}" wx:key="id">
  <!-- 显示项目详情 -->
</view>

注意到上面我说假设列表项是字典，如果不是字典就另有区别，接下来进行区分两种情况

字符型列表项

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:key="*this">

上面例子中，列表项都是数字，那么数字本身就能唯一标识每个列表项，因此我们使wx:key="*this"，*this是一种特殊写法，指定列表项自身为区分标志。

字典型列表项

// 页面.js
fortest: [
      {name:"牛头",age:18},
      {name:"马面",age:19}
    ]

每个列表项都是一个字典，字典中有能唯一区分每个列表项的键（下面是name），那么我们就可以将他作为wx:key的值。写法如下：

<view wx:for="{{fortest}}" wx:key="name"></view>

二、为什么要用wx:key？没有好处谁都不会用

• 使用 wx:key 时，你是在告诉微信小程序的渲染引擎如何区分列表中的不同列表项。
• 当小程序的渲染引擎遇到列表变化（比如列表项的添加或删除）时，它可以通过查看 wx:key 值快速确定哪些项目已经改变、被添加或被移除。这样可以避免重新渲染列表中的所有项目，而只更新必要的项目，从而提高性能。
• 如果你不提供 wx:key，小程序仍然可以工作，但对于大型列表或频繁变化的列表，可能会导致性能不佳。除非有特殊情况，否则在使用 wx:for 时总是提供 wx:key 是最佳实践。