为什么当通过 {#key} 重新渲染子组件时，绑定的 prop 不会在父级中重置？

Question

鉴于这种情况 REPL 打开页面时，通过绑定到组件内部的值来设置父级中未定义的绑定值。
但是当值被更改并且组件通过 {#key} 块重新渲染时，父级中的值不会再次重置，而是保持更改后的值，然后也在重新渲染的组件中设置。

为什么绑定在这种情况下不起作用？是第一次挂载组件的顺序问题吗？

App.svelte

<script>
    import Comp from './Comp.svelte'

    let value

    let rerender=true
</script>

{#key rerender}
<Comp bind:value />
{/key}

<p>
    {value}
<!--    isn't reset by rerendering the component -->
</p>

<button on:click={() => rerender = !rerender}>
    2. rerender Comp
</button>

Comp.svelte

<script>
    import {onMount} from 'svelte'
    
    export let value = 'startValue'
    
    onMount(() => {
        console.log('Comp mounted, value >', value)
    })
</script>

<button on:click={() => value = 'changedValue'}>
    1. change value
</button>

Answer 1

组件中的值只是一个默认值，见the docs:

You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is undefined) when instantiating the component.

Answer 2

bind:value 是一个 two-way 绑定。

在您的代码（和您的 REPL）中，第一次渲染组件时，value 是 undefined，因此 value prop inside child 设置为默认值，由于 two-way 绑定，这又会在父级中更改 value。

第二次渲染组件，但是，value在父组件中不是undefined，因为它已经设置为实际值，如果您从未单击更改值按钮，则为 startValue，如果单击，则为 changedValue。所以子组件接收到的 value prop 不再是 undefined，因此没有使用默认值

如果您在 re-render 您的组件时实际将 value 重置为 undefined，则无论何时单击 re-render 按钮，您都会再次看到 startValue : REPL

为什么当通过 {#key} 重新渲染子组件时，绑定的 prop 不会在父级中重置？

Why is binded prop not reset in parent when child component is rerendered via {#key}?

svelte

App.svelte

Comp.svelte