不同条件下的each编译与优化

[xinglie]

普通循环

{{each list as item}}
    {{=item}}
{{/each}}

编译为

for (let $q_c_b657119637f = list?.length, $q_key_1bca60b38e3 = 0; $q_key_1bca60b38e3 < $q_c_b657119637f; $q_key_1bca60b38e3 += 1) {
    let item = list[$q_key_1bca60b38e3];
    $vnode_0.push($createVNode(0, (item)));
}

当为倒序循环时

{{each list as item by desc}}
    {{=item}}
{{/each}}

编译为

for (let $q_key_4247bbc66bbb = list?.length; $q_key_4247bbc66bbb--;) {
    let item = list[$q_key_4247bbc66bbb];
    $vnode_0.push($createVNode(0, (item)));
} 

可以看到是使用

for(let index=list.length;index--;){

}

进行的优化

指定步长

{{each list as item step 2}}
    {{=item}}
{{/each}}

编译为

for (let $q_c_468888d338c0 = list?.length, $q_key_20dc8c0bb820 = 0; $q_key_20dc8c0bb820 < $q_c_468888d338c0; $q_key_20dc8c0bb820 += 2) {
    let item = list[$q_key_20dc8c0bb820];
    $vnode_0.push($createVNode(0, (item)));
} 

当为倒序循环时

{{each list as item step 2 by desc}}
    {{=item}}
{{/each}}

编译为

for (let $q_key_22aae5366430 = list?.length - 1; $q_key_22aae5366430 >= 0; $q_key_22aae5366430 -= 2) {
    let item = list[$q_key_22aae5366430];
    $vnode_0.push($createVNode(0, (item)));
}

当指定步长时，就需要考虑循环出边界的情况

循环深层对象

{{each user.address as item by desc}}
    {{=item}}
{{/each}}

编译为

for (let $q_a_60809231873f = user.address, $q_key_532b3fbca764 = $q_a_60809231873f?.length; $q_key_532b3fbca764--;) {
    let item = $q_a_60809231873f[$q_key_532b3fbca764];
    $vnode_0.push($createVNode(0, (item)));
} 

可以看到使用short=long.expr进行赋值操作，减少对象的深层次访问