微信小程序学习笔记——WX:key的使用

wx：key作用介绍：

wx:key一般是用在wx:for或者其他需要动态渲染的地方，采用wx:key可以对渲染列表中的元素给定唯一标识，使当我们的数组发生改变时，渲染中的原数据可以保持自己的特性。

举个例子，现在有个点击按钮勾选的例子，当我们勾选羔羊排骨一条，点击增加数据后，羔羊排骨左侧的被选中状态按理来说是应该一直跟随羔羊排骨的，但是我们可以发现被选中按钮并没有跟随羔羊排骨变化，而是哪个数据是第一个哪个数据就是被选中状态，这就是因为我们在写for循环时没有添加wx:key没有给定数据一个唯一的标识导致算法无法固定原有数据的渲染。

图片来源：微信小程序wx:key的使用

当我们采用wx:key之后，原数据的渲染状态就不会改变了

wx:key的使用

wx:key的使用很简单，就是对我们数组中的每个数据给定一个唯一的标识就行

常用的标识：

1、wx:key="*this"

*this表示数组中元素本身，采用*this当wx:key时数组中的每个元素必须是不重复的，举个例子

//如果我在data中定义了两个数组arr，arr2,用于for循环渲染

arr=[

"小明",

"小红"，

"小黄"

]

arr2=[

"小明"，

“小明”

],

 可以从上述定义的arr数组中发现，在arr数组中定义的元素：“小明”、“小红”、“小黄”都是不重复的所以可以采用*this作为wx:key，但是在arr2中定义的两个元素是重复的都是“小明”因此不能采用*this作为wx:key。

2.在定义元素时为每组元素定义一个唯一标识采用唯一标识作为wx:key

//在data中定义一个数组arr进行渲染

arr=[

{
id:1,

name:"小明"

},

{

id:2,

name:"小明"

},

]

在定义arr数组时，由于name元素有可能重复因此为每个元素定义了一个id，每组元素的id都不一样因此可以采用id作为wx:key，wx:key="id"

参考文章：

【小程序】006 详解wx:key - 知乎

微信小程序wx:key的使用