列表渲染 - list

list语句用来根据列表或对象选项进行循环渲染。

Example

<ul>
{#list sequence as item}
  <li>{item.name}</li>
{/list}
</ul>

说明

• sequence: 求值为数组或对象的表达式
• item: 迭代数组元素的别名

1. 下标 {别名}_index

每次迭代会创建一个名为 {别名}_index 的下标别名，下标从 0 开始。

Example

const component = new Regular({
  template: `
    {#list items as obj}
        <span class='index'>{obj_index}:{obj}</span>
    {/list}
    `,
  data: {
    items: ["a", "b", "c", "d"]
  }
})

component.$inject(document.body);

输出

<span class="index">0:a</span>
<span class="index">1:b</span>
<span class="index">2:c</span>
<span class="index">3:d</span>

2. #else语句展示空状态

嵌入#else语句来来展示列表 为空 的情况

[], null, undefined 都会视为是空值

Example

{#list list as item }
  <div class='item'>{item}</div>
{#else}
  <div class='altnate'> no result here  </div>
{/list}

3. 使用 track语句 加速你的列表渲染

默认条件下，Regular会使用莱文斯坦编辑距离算法来计算最小变更DOM。

但这个算法的时间复杂度是 O(n²) ，在列表超过一定数量时(比如 >100 )，它的逻辑开销就会明显超过DOM的开销。

所以Regular 提供了by 描述符来精确控制DOM的销毁与复用

3.1. 使用

Syntax

{#list sequence as item by Expression}

{/list}

• Expression: 任意表达式(如item.id)，⚠️记得每个迭代的表达式求值应该是唯一不重复的

Example

3.2. by 下标

最常用的场景就是直接track下标,这种在内部是最快的实现，因为没有任何排序和对比开销。

3.3. 注意点

• track复用的节点不会重新调用组件的生命周期流程（config、init)，只是简单的更新迭代别名对应的值。
• ⚠️track不能应用在对象的列表渲染中，因为对象本质是无序的。
• 在超大列表下，尽可能的使用下标track，达到最佳的性能效果。

4. 对象的列表渲染

Regular 支持对象类型的列表渲染渲染

4.1. 键的别名变量 {别名}_key

在对象的列表渲染中，假设循环别名是item, 各别名的意义分别是

• item: 迭代的对象值
• item_key: 迭代的对象键
• item_index: 迭代的下标

Example

4.2. 解决对象渲染无法track

上节提到了对象是无法进行track的，你可以先将其转换为有序, 再使用track描述

也可以在JS中转换为数组

5. 要点提示

• 与其它语句一样，list语句包裹的结构不受单节点限制