微信小程序列表渲染

1. 指令
渲染指令：vx:for
每个项目在微信小程序中定好了，都叫item。

2. 微信小程序的列表渲染
可以渲染数组，字符串，数字

// 渲染数字
<view wx:for="{{students}}" wx:key="{{item.id}}">{{ item.name }} - {{item.age}} - {{index}}</view>
// 渲染字符串
<view wx:for="xiaodudu" wx:key="{{index}}">{{item}} - {{index}}</view>
// 渲染数字
<view wx:for="{{10}}" wx:key="{{index}}">{{item}}</view>

3. 特殊的block标签
block标签，不是组件，是标签，不会被渲染出来，类似于Vue的template标签。
我们用block标签可以做vx:if或者vx:for，但是不能写其他非渲染标签，比如style啥的。因为block标签不会在DOM树中渲染。

使用block的好处：

• 性能消耗的要少

<block wx:for="{{3}}">
  <button>click me</button>
  <view>哈哈哈</view>
</block>

4. 给item和index起名字

<!-- 在什么情况下会起名字：在多层遍历的时候 -->
<view 
  wx:for="{{movies}}" 
  wx:for-item="movie"
  wx:for-index="i"
>{{movie}} -- {{i}}</view>

<block wx:for="{{nums}}" wx:for-item="outer">
  <block wx:for="{{outer}}">
    <view>{{item}}</view>
  </block>
</block>

5. 给遍历组件绑定key
和虚拟DOM有关，DIFF算法有关。
加上key能提高性能
有key的话，先将改变的那个放在最后边，其他不变，再将它插入到应该在的位置中。

key：会优先对比key。
所以不能用index来做，这样key是时时刻刻变化的，性能并不会提高了。

以下是for循环的正确且完整的写法：

<view wx:for="{{students}}" wx:key="{{item.id}}">{{item.name}} - {{index}}</view>