微信小程序数据列表渲染：简单易懂wx:for （本地数据渲染案例）（wx:key的作用）_wx:for-item=news

主要解决数据列表渲染问题

1、
这是官方给出的案例
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
      {{index}}: {{item.message}}
    </view>
    
    
    Page({
      data: {
        array: [{
          message: 'foo',
        }, {
          message: 'bar'
        }]
      }
    })
    
    
    wx:for-item 可以指定数组当前元素的变量名，
    使用 wx:for-index 可以指定数组当前下标的变量名：
    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
      {{idx}}: {{itemName.message}}
    </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、接下来用实际案例渲染本地数据，并加以说明改变变量名之间的区别。

1. 在项目中新建一个数据文件，

 var news= [
    {
        "id":"1",
        "new" :"这是第一条消息"
    },
    {
        "id":"2",
        "new": "这是第二条消息"
    },
    {
        "id":"3",
        "new": "这是第三条消息"
    }

]
module.exports = {news}; //一定要记住这句话 将数据暴露出去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.然后在需要渲染的页面

mine.js

var jsonData = require('../../datas/news.js'); //将数据代码引进来
Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    this.setData({
      news: jsonData.news
    });
    }
})

1
2
3
4
5
6
7
8
9
10
11
12

mine.wxml

 <!-- 默认方式
       <view class="newslist" wx:for="{{news}}" 
        >    
          <text>
          下标{{index}}  
         打印ID {{item.id}} 
        输出消息{{item.new}}
        </text> 
       </view>
-->

      <view wx:for="{{news}}" wx:for-index="idx" wx:for-item="item2">
          <text class="newslist" >
            下标{{idx}}
            ID {{item2.id}}
            输出消息 {{item2.new}}
          </text> 
      </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4、以上两种方式输出都是

4、关于wx:key使用见解

当我们的渲染列表项目具有唯一标识符的时候，也就是说有一定的顺序id,我们加上key属性可以提高我们的性能，可以在DIff算法对比执行之后直接复用顺序，而不需要重排，从而提高的我们渲染的性能。

key的作用主要就是为了性能优化，key让组件具有了唯一性，能让diff算法更快的找到需要更新的组件dom，在绑定key的时候，最好是一个唯一的值，如item.id 而不能是简单的index，如果不使用唯一key，那么在有状态组件中会出现渲染错误。因为它默认用就地复用策略，如果数据项的顺序被改变，那么vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，不会重新排列元素的位置。如果是使用 key，它会基于key重新排列元素顺序，并且会移除 key 不存在的元素。
简单说就是，不使用key就会原地复用，使用key就会对元素位置进行重新排列，能够关联数据状态。

1