Svelte：else if 块条件在 if 块条件更改后不进行计算

Question

编辑：这是一个错误https://github.com/sveltejs/svelte/pull/7043

考虑以下示例，foo只要isfalse和bar[0]is ，就会期望“bar”在第二条水平规则下呈现true。

<script>
    let foo = true
    let bar = [false];
</script>

<button on:click={() => foo = !foo}>
    Toggle foo
</button>
<button on:click={() => bar[0] = !bar[0]}>
    Toggle bar
</button>

<hr>
{@html `foo: ${foo}, bar: ${bar.every(x => x)}`}
<hr>

{#if foo}
    foo!
{:else if bar.every(x => x)}
    bar!
{/if}

但是，如果执行以下步骤，反应性似乎会中断：

1. 设置foo​true
2. 设置bar[0]​true
3. 设置foo​false

即使else if满足块条件，在水平规则下也不会渲染任何内容。如果 else if 条件很简单，则情况并非如此bar[0]，因此似乎使用函数是导致其不被评估的原因。切换之前和bar再次切换之后时true的类似行为，意外地在底部呈现“栏”。foofalsefoo

当条件为和foo之间切换时，可以观察到相同的效果。null[]else ifArray.isArray(bar)

这是一个错误还是我错过了什么？

Answer 1

它并不是真正的错误，它在您的场景中有点预期的行为，当您更改foo to true时，bar to true现在设置栏，并且当您认为它会触发反应性时foo to false再次更改！bar didn't change

解决方法是在任何值发生变化时自行触发它：

{#key foo || bar}
    {#if foo}
        foo!
    {:else if bar.every(x => x)}
        bar!
    {/if}
{/key}

这是一个工作副本