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

本文主要是介绍微信小程序 笔记 wx:key用法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

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

在没引入wx:key之前

1. <!--my.wxml-->
2. <view wx:for="{{lines}}">
3. <switch>{{item.info}}</switch>
4. </view>
5. <button bindtap="tapfn">数据更新</button>

1. //my.js部分
2. data: {
3. lines:[
4. {
5. id:1,
6. info:"萨摩耶"
7. },
8. {
9. id: 2,
10. info: "哈士奇"
11. },
12. {
13. id: 3,
14. info: "阿拉斯加"
15. }
16. ]
17. },
18.  
19. tapfn:function()
20. {
21. var lines=this.data.lines
22. lines.splice(0,0,{
23. id:5,
24. info:"田园犬"
25. })
26. this.setData({
27. lines:lines
28. })
29. },

效果如下：

点击数据更新后

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

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

1. <!--my.wxml-->
2. <view wx:for="{{lines}}" wx:key="id">
3. <switch>{{item.info}}</switch>
4. </view>
5. <button bindtap="tapfn">数据更新</button>

再进行相同的操作

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

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

1. <!--my.wxml-->
2. <view wx:for="{{lines}}" wx:key="*this">
3. <switch>{{item}}</switch>
4. </view>
5. <button bindtap="tapfn">数据更新</button>

1. //my.js
2. data: {
3. lines:[1,2,3,4]
4. },
5.  
6. tapfn:function()
7. {
8. var lines=this.data.lines
9. lines.splice(0,0,5)
10. this.setData({
11. lines:lines
12. })
13. },

 效果如下：

点击后：

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

这篇关于微信小程序 笔记 wx:key用法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！