为什么双向绑定组件在 Svelte 中更新两次？答案

【问题标题】：Why two-way bound component updates twice in Svelte?为什么双向绑定组件在 Svelte 中更新两次？
【发布时间】：2020-08-23 08:16:10
【问题描述】：

我有一个<select> 绑定到 activity.status，如下所示：

<script>
import Dropdown from './Dropdown.svelte'
let activity = {
    id: 1,
    projectName: "Test Project",
    lead: {id: 10, value: "Unassigned"},
    status: {id: 3, value: "Closed"},
    statusDetail: {id: 15, value: "Missing Budget"}
    }

let statusOptions = [
        { id:1, value:"Open"},
        { id:2, value:"On-Hold"},
        { id:3, value:"Closed"}
        ]

$:console.log(activity.status);
</script>

<select bind:value={activity.status}>
    {#each statusOptions as option}
        <option value={option} >{option.value}</option>
    {/each}
</select>

<!-- <Dropdown  options={statusOptions} bind:selected={activity.status}/> -->

每次我更新<select> 时都会触发$:console.log(activity.lead)。

但是一旦我改用<Dropdown/>，它就会触发两次。这是组件：

<script>
export let selected = {} 
export let options = [{id:0, value: "No Options..."}]
</script>

<select bind:value={selected}>
    {#each options as option}
        <option value={option} >{option.value}</option>
    {/each}
</select>

我对 Svelte 的了解不多，但我研究了 API 并在 stackoverflow 上进行了搜索。我唯一没有尝试的是发出自定义事件。但这似乎有点额外的代码和不雅致。我不介意双重更新，但它似乎很愚蠢。所以我想知道：为什么会这样？我应该发出自定义事件吗？还是我犯了一些基本错误？

谢谢你，菲利普

【问题讨论】：

标签： javascript object svelte two-way-binding svelte-component

【解决方案1】：

我的问题突然消失了。我怀疑它与单个顶级元素有关，因为在我删除组件中的其他顶级元素后它消失了。然而，当我把它们放回去时，它仍然有效，所以我不能再重现这个问题了。

Svelte doesn't require you to have single top level element like Vue or React 所以这可能是我犯的一些错误但不记得了。

同样在official tutorial by Svelte 中，他们建议人们谨慎使用组件绑定。如果有人遇到同样的问题，我会发布答案。祝你好运！

【讨论】：