Svelte中对象列表响应式触发：如何隐藏所有消息

问题背景 #

你定义了一组消息对象：

let message1 = {message: 'message one', is_visible: true};
let message2 = {message: 'message two', is_visible: true};

let message_list = [message1, message2]

在Svelte模板中通过is_visible属性控制消息显示：

{#if message1.is_visible}
    <p>{message1.message}</p>
{/if}

{#if message2.is_visible}
    <p>{message2.message}</p>
{/if}

尝试用以下代码批量隐藏所有消息，但未生效：

message_list = message_list.map(({is_visible, ...rest}) => ({...rest, is_visible: false}));

原因分析 #

你的map方法会生成全新的对象，但模板绑定的是原始的message1、message2变量，新对象的属性变化不会同步到原始变量，因此模板不会触发更新。

解决方案 #

方案1：直接修改原始对象属性

遍历message_list，直接修改每个原始对象的is_visible属性——Svelte能追踪对象属性的变化，修改后模板会自动更新：

message_list.forEach(msg => {
    msg.is_visible = false;
});

方案2：改用数组遍历渲染（更推荐）

既然已经维护了message_list，可以直接在模板中遍历数组渲染消息，这样后续操作数组更灵活：

{#each message_list as msg}
    {#if msg.is_visible}
        <p>{msg.message}</p>
    {/if}
{/each}

此时你原来的map方法就能正常生效，因为Svelte会追踪数组的替换操作，模板会重新渲染所有消息：

message_list = message_list.map(({is_visible, ...rest}) => ({...rest, is_visible: false}));

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