面试题：Svelte模板语法中的指令应用

Question

描述Svelte中`{#each}`和`{#if}`指令的使用场景及注意事项。假设你有一个包含用户信息的数组，每个用户信息对象包含`name`和`age`字段，使用`{#each}`指令在模板中渲染用户列表，并且当用户年龄大于18岁时，使用`{#if}`指令在用户名字旁显示'成年人'。

Answer 1

{#each}指令

使用场景

用于遍历数组或对象，在模板中重复渲染相同结构的元素。例如渲染列表、菜单等。

注意事项

1. 需提供一个唯一的key值，用于Svelte跟踪每个元素的状态，提高性能。如在遍历数组时，若没有唯一key，当数组元素顺序变化或有元素增删时，Svelte可能无法高效更新DOM。
2. 可通过{#await}等指令与{#each}结合处理异步数据，如异步获取的列表数据。

{#if}指令

使用场景

根据条件来决定是否渲染模板中的某部分内容。常用于根据不同状态展示不同UI，例如根据用户登录状态展示不同导航栏。

注意事项

1. 条件表达式需是布尔值或可转换为布尔值的表达式。
2. 避免复杂的条件逻辑写在{#if}中，可提前计算好条件值，提高代码可读性和性能。

示例代码

<script>
    const users = [
        { name: 'Alice', age: 20 },
        { name: 'Bob', age: 15 }
    ];
</script>

<ul>
    {#each users as user, index}
        <li key={index}>
            {user.name} 
            {#if user.age > 18}
                (成年人)
            {/if}
        </li>
    {/each}
</ul>