Svelte：数组突变和重新分配不会触发 #each 块中的重新渲染

Question

我不知道为什么不更新。我对 Svelte 比较陌生，但我知道使用 thing = thing 方法强制更新对象数组。

不过，我不确定为什么这不会重新呈现？我首先将它作为一个矩阵，我想也许有一些嵌套破坏了它，但现在这实际上只是一个平面数组。它在点击时更新矩阵，但不会触发重新渲染。

<script>
    import Nested from './Nested.svelte';
    let matrix = new Array(9).fill(null)
    let turn = 0
    
    let handleChange = (index) => {
        if (matrix[index] != null) return
        let newColor = turn % 2 == 0 ? 'red' : 'blue'
        matrix[index]= newColor
        turn++
        matrix = matrix
    }
</script>
    {#each matrix as team, index}
        <Nested team={team} index={index} click={handleChange}/>
        {#if (index==2 || index==5)}
            <br />
        {/if}
    {/each}

嵌套组件：

<script>
    export let index;
    export let click;
    export let team;
    
    let color = 'white';
    if (team) color = team;
</script>

<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: inline-block;
        margin: 0;
    }
</style>

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

Answer 1

使用 Svelte 时，需要牢记的重要一点是 script 块中的代码仅在创建组件时执行。

在您的情况下，这意味着 if (team) color = team; 行仅运行一次（在实例化时），之后再也不会运行。

如果你想重新执行某些东西，你必须使用 $:

声明它是响应式的

对你来说会变成

$: if (team) color = team

每当使用的任何变量（团队和颜色）发生变化时，都会重新执行此操作。

请注意，您也可以简单地将变量标记为反应式（Svelte 为您注入 let）

export let index;
export let click;
export let team;
    
$: color = team ?? 'white'

Svelte：数组突变和重新分配不会触发 #each 块中的重新渲染

Svelte: Array mutation and re-assignment not triggering re-render in #each block

svelte

svelte-3

svelte-component