svelte中的模板逻辑

条件渲染

{#if expression}
...
{:else if expression}
...
{:else}
...
{/if}

使用 if 块包含条件渲染内容
使用 {:else if expression} 添加更多条件
使用 {:else} 作为最后条件

# 字符代表块开始标记
/ 字符代表块结束标记
: 字符表示块连续标记

列表渲染

{#each expression as val}...{/each}
{#each expression as val (key)}...{/each}
{#each expression as val, index}...{/each}
{#each expression as val, index (key)}...{/each}
{#each expression as val}...{:else}...{/each}

如果列表为空，则显示{:else}条件下内容

key必须确保具有唯一性，以便Svelte在列表中任意位置改变数据，而不是仅在数据末尾新增或删除

列表渲染能应用于任意数组或类数组的对象(具有length属性的任何对象)

迭代器可以使用{#each [...iterable] as val}来遍历

对象不可以直接通过each块遍历，需要通过一定的方式转换成数组

使用Object对象的静态方法
1、Object.entries(obj)：返回obj对象自身属性的[key, value]组成的数组
2、Object.keys(obj)：返回obj对象自身可枚举属性名称的数组
3、Object.values(obj)：返回obj自身可枚举值的数组

    {#each Object.entries(obj) as val}

异步渲染

await块可以表示Promise的pending、 fulfilled 和 rejected三个状态

{#await promise}
...
{:then data}
...
{:catch error}
...
{/await}

如果不关心rejected状态或明确了会不有rejected状态，可以省略catch块或使用精简语句

如果在promise被resolve之前不想显示内容，也可以省略第一个块：

{#await promise then data}
...
{/await}

销毁重建

如果某个位置有一个动画效果，那么该动画会在元素刚创建时播放，播放完毕后修改该元素的显示内容并不会重新播放动画

key块就是解决这个问题的，当key块中表达式的值发生变动时，将销毁并重新创建其内容

{#key expression}
...
{/key}

debug调试

{@debug val1,val2,...}标签

当指定的变量的状态发生变化时，它会记录并打印这些变量的最新值，打印一个对象，里面包含所有监听的变量的值

如果打开了devtools，则会触发debugger调试暂停

不指定任何变量的 {@debug} 标记，当任何变量状态改变时，该语句都会被触发