Svelte 似乎对分配的变量更改有反应

Question

假设我将此作为主页：

<script>
    import Child from "./Child.svelte";

    let person = { name: "" };
</script>

<Child {person} />

小时候是这样的：

<script>
    export let person;

    let name;
    $: name = person.name;
</script>

<input bind:value={name} />

你可以尝试一下这里。

我不直接绑定的原因

person.name

是因为我根本不想改变父对象，我更喜欢抛出一个事件。

我希望能够通过在输入中键入值来修改子组件的名称变量。父元素中的修改但是它根本不起作用，因为无论我在其中输入什么，输入仍然为空。

创建这个最小的示例并将

console.log

放置在任何地方后，似乎在我在输入字段中键入内容后，就会立即触发

$: name = person.name

行，但它不应该这样做，因为

person.name

不会改变，分配的变量确实如此。

这确实很简单，但我不明白为什么会发生这种行为，所以提前感谢您的帮助

Answer 1

我终于找到了适合我的情况的解决方案。正如我在原帖中所说，我尽量避免改变任何对象的属性，所以实际上我可以在 Child.svelte 中添加

<svelte:options immutable />

。

而且它有效！这样，Svelte 不会更新组件，直到重新分配其父组件。我在这里找到了一些细节。