為什么雙向綁定組件在 Svelte 中更新兩次？

Question

我有一個<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>

我對苗條的了解不多，但我研究了 API 並在 stackoverflow 上進行了搜索。 我唯一沒有嘗試的是發出自定義事件。 但這似乎有點額外的代碼和不雅致。 我不介意雙重更新，但它似乎很愚蠢。 所以我想知道：為什么會這樣？ 我應該發出自定義事件嗎？ 還是我犯了一些基本錯誤？

謝謝你，菲利普

Answer 1

我的問題突然消失了。 我懷疑它與單個頂級元素有關，因為在我刪除組件中的其他頂級元素后它消失了。 但是，當我把它們放回去時，它仍然有效，所以我不能再重現這個問題了。

Svelte 不要求您擁有像 Vue 或 React 這樣的單個頂級元素，所以這可能是我犯的一些錯誤，但不記得了。

同樣在Svelte 的官方教程中，他們建議人們謹慎使用組件綁定。 如果有人遇到同樣的問題，我會發布答案。 祝你好運！

Answer 2

看這里：

Svelte 每個工作兩次/每個綁定錯誤（無法設置未定義的屬性）