（二）03-WXML模板语法详解-列表渲染——wx：for 用法 & wx：for-item 给数据项改别名 & wx：key 作用 & 遍历对象数组

列表渲染

• wx:for

• wx:key

<!-- 默认item表示其中一项数据 -->
<!-- 默认index表示数据项的索引 -->
<view wx:key='{{index}}' wx:for='{{list}}'>
  {{index}} {{item}}
</view>

• wx:for-index 给索引起一个别名
• wx:for-item 给数据项起一个别名

注：

如果修改默认名称原来的名称就不可以使用了

<view wx:for-index='num' wx:for-item='name' wx:key='{{index}}' wx:for='{{list}}'>
  {{num}} {{name}}
</view>

• wx:key 的作用：保证兄弟节点被唯一区分，主要用于提高性能

• 对象数组的遍历

<view wx:for-index='num' wx:for-item='name' wx:key='{{index}}' wx:for='{{listData}}'>
  {{num}} {{name.ename + '--' + name.cname}}
</view>

• 关于key的补充分析

  • 网页更新比较耗时
  • 为了节省时间，需要尽可能少的更新DOM节点
  • 通过何种方式解决上述问题？虚拟DOM
  • 虚拟DOM实际上是真实DOM的一种描述（本质上采用了对象的方式进行描述）

  <div id="123" class="active">hello</div>
  // 下面的对象（虚拟节点VNode）描述了上面的DIV元素
  var vnode = {
  	key: 1
  	tagName: 'div',
  	attrs: {id: 123, class: 'active'}
  	children: 'hello'
  }
  

  • 采用虚拟节点的方式描述整个真实的DOM树：虚拟DOM树
  • 当数据发生变化时，要对比虚拟DOM树数据变化前后的差异（Diff算法）
  • 对比的产物是发生变化的虚拟节点的集合
  • 需要把虚拟节点转化为真实的DOM节点

  var div = document.createElement(vnode.tagName)
  for(var key in vnode.attrs) {
    div.setAttibute(key, vnode.attrs[key])
  }
  div.innerHTML = vnode.children
  

  • 最终更新页面的真实DOM

  replaceNode()