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

问题出在Svelte的响应式追踪机制上：Svelte是通过赋值操作来检测变量变化的，而array.push('4')属于数组的原地修改，数组的引用地址没有改变，所以Svelte无法感知到变化，也就不会触发页面重新渲染。

你可以用以下几种方法解决：

方法1：修改后重新赋值数组 #

在push之后，手动给数组重新赋值，让Svelte检测到引用变化：

<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; // 关键：重新赋值触发响应式
        console.log(array);
    }}>Click Me</button>

方法2：直接创建新数组 #

用扩展运算符生成新数组，直接赋值，一步到位：

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

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

<button
    on:click={() => {
        array = [...array, '4']; // 生成新数组并赋值
        console.log(array);
    }}>Click Me</button>

这两种方法都能让Svelte检测到数组的变化，从而同步更新页面渲染内容。

内容的提问来源于stack exchange，提问作者Newbie