Svelte项目非内联函数切换数组元素时DOM不更新的解决方法

问题原因 #

Svelte的响应式系统依赖赋值操作追踪状态变化。模板内联代码中修改对象属性时，Svelte会自动处理响应式触发逻辑；但在外部函数中直接修改传入对象的属性时，由于没有对顶层变量array的赋值动作，Svelte无法检测到状态变化，导致DOM无法同步更新。

解决方法 #

方法1：使用Svelte内置的$set函数

通过$set修改对象属性，能主动触发Svelte的响应式更新：

<script>
    import { set as $set } from 'svelte/store';
    let array = [{'truth': false}, {'truth': false}];
    
    function toggleTruth(el) {
        $set(el, 'truth', !el.truth);
    }
</script>

{#each array as element}
<h1 on:click={() => element.truth = !element.truth}>(inline)Truth is {element.truth} (Does what I want)</h1>
<h1 on:click={() => toggleTruth(element)}>(ext function)Truth is {element.truth}</h1>
{/each}

方法2：重新赋值数组触发更新

通过创建数组副本并重新赋值，让Svelte检测到数组的变化：

<script>
    let array = [{'truth': false}, {'truth': false}];
    
    function toggleTruth(index) {
        // 修改目标元素的属性
        array[index].truth = !array[index].truth;
        // 重新赋值数组，触发响应式更新
        array = [...array];
    }
</script>

{#each array as element, i}
<h1 on:click={() => element.truth = !element.truth}>(inline)Truth is {element.truth} (Does what I want)</h1>
<h1 on:click={() => toggleTruth(i)}>(ext function)Truth is {element.truth}</h1>
{/each}

方法3：在模板内完成赋值操作（简洁版）

让函数返回修改后的元素，再在模板内完成赋值，触发响应式：

<script>
    let array = [{'truth': false}, {'truth': false}];
    
    function toggleTruth(el) {
        el.truth = !el.truth;
        return el;
    }
</script>

{#each array as element}
<h1 on:click={() => element.truth = !element.truth}>(inline)Truth is {element.truth} (Does what I want)</h1>
<h1 on:click={() => element = toggleTruth(element)}>(ext function)Truth is {element.truth}</h1>
{/each}

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