Svelte中数组变更与重新赋值未触发#each块重新渲染问题

问题根因 #

父组件的数组更新逻辑没有问题，matrix = matrix确实触发了父组件重渲染，新的team值也已经传递到子组件，问题出在子组件的color变量没有设置响应式更新：
当前子组件中的let color = 'white'; if (team) color = team;只会在组件第一次初始化时执行一次，之后即使传入的team属性发生变化，这段代码也不会重新运行，因此界面不会同步更新。

修复方案 #

方案1：给color添加响应式声明

Svelte中使用$:前缀标记的语句会在依赖变量变化时自动重新执行，修改子组件的script部分即可：

<script>
    export let index;
    export let click;
    export let team;
    
    $: color = team || 'white';
</script>

模板和样式部分无需改动，即可正常响应team的变化。

方案2：省略多余的color变量，直接在模板中使用team属性

不用单独维护color变量，直接修改模板部分更简洁：

<div style="background-color: {team || 'white'}" on:click={(e)=>click(index)}>
    {team || 'white'}
</div>

补充说明：父组件的matrix = matrix写法是生效的，也可以替换为更符合常规习惯的matrix = [...matrix]生成新数组赋值，效果一致。

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