为啥双向绑定组件在 Svelte 中更新两次？

Posted 2023-03-07

【中文标题】为啥双向绑定组件在 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 并在 *** 上进行了搜索。我唯一没有尝试的是发出自定义事件。但这似乎有点额外的代码和不雅致。我不介意双重更新，但它似乎很愚蠢。所以我想知道：为什么会这样？我应该发出自定义事件吗？还是我犯了一些基本错误？

谢谢你，菲利普

【参考方案1】：

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

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

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