如何让Svelte响应式特性感知数组变化并更新视图

问题描述 #

我正尝试实现Svelte对数组变化的响应式更新，数组已被修改，但HTML输出并未同步更新。代码如下：

<script>
    $: objs = [] || getObjects(objs);

    function update(){
        getObjects(objs);
    }

    function getObjects(objs) {
        objs.push('a');
        objs = objs
        console.log(objs);
        return objs;
    }
</script>

<h1>Lists</h1>
{#each objs || [] as obj}
    <div>
        { obj }
    </div>
{/each}
<button on:click={update}>Update</button>

问题原因 #

1. Svelte的响应式系统依赖变量赋值操作触发更新，直接调用push修改数组内部元素后，未对objs重新赋值，Svelte无法感知数组变化。
2. 初始的$: objs = [] || getObjects(objs)逻辑错误：[]是真值，getObjects仅在组件初始化时执行一次，后续数组变更不会触发该语句。
3. update函数中调用getObjects(objs)但未将返回值赋值给objs，响应式变量未得到更新。

解决办法 #

方式一：修改数组后触发赋值操作 #

直接修改数组后，通过objs = objs告知Svelte数组已变更：

<script>
    let objs = [];

    function update(){
        objs.push('a');
        // 触发响应式更新
        objs = objs;
        console.log(objs);
    }
</script>

<h1>Lists</h1>
{#each objs as obj}
    <div>{ obj }</div>
{/each}
<button on:click={update}>Update</button>

方式二：创建新数组赋值（推荐） #

遵循不可变数据模式，通过扩展运算符创建新数组并赋值，更符合Svelte响应式最佳实践：

<script>
    let objs = [];

    function update(){
        // 创建新数组并赋值
        objs = [...objs, 'a'];
        console.log(objs);
    }
</script>

<h1>Lists</h1>
{#each objs as obj}
    <div>{ obj }</div>
{/each}
<button on:click={update}>Update</button>

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