当 Svelte/Svelte Kit 中的变量更改时如何更新渲染内容

Question

我在 sveltekit 中有一个简单的 svelte 页面：

<script>
    let array = [1, 2, 3, 4, 5];
</script>

{#each array as item}
    <li>{item}</li>
{/each}

<button
    on:click={() => {
        array.push('4');
        console.log(array);
    }}>Click Me</button
>

非常简单的概念。当我更新数组时，我希望页面上的内容也随之更新。有人可以帮助我弄清楚我需要做什么吗？谢谢艾亚！

PS-- 单击按钮后阵列已成功更新

Answer 1

Svelte 的反应性是由赋值触发的，因此如果您push要写入数组，则必须array = array在其后面写入以告诉 Svelte 编译器它已更改。

示例（REPL）

<script>
    let array = [1, 2, 3, 4, 5];
</script>

{#each array as item}
    <li>{item}</li>
{/each}

<button
    on:click={() => {
        array.push('4');
        array = array;
    }}
>
    Click Me
</button>