有什么理由在 Svelte 中对对象或数组道具使用绑定？

Question

我注意到如果一个对象或者数组作为prop传入，那么当里面的任何元素在子组件中发生变化时，变化都会反映在父组件中的原始对象或数组中。似乎 2-way binding 已经在发生了。那么有什么理由对对象或数组使用绑定？有什么区别吗？

Answer 1

是的，有区别。

粗略地说，svelte 中的视图反应性完全由某种分配操作决定（跟踪 = 运算符）。 bind 将被转译为父范围内的分配。没有它，父母将不会收到更改通知。

这种行为可以类比为 react 的 setState 调用，这也是唯一可以触发响应式更新的东西。

在 svelte 和 react 中，可以重现相同的行为：您将对象作为 prop 向下传递，您可以在子组件中对其进行变异，仅在子组件中渲染而不通知父组件更新。只是不建议这样做。

我对可变数据没有强烈的看法，但编写任何会在视图和状态之间产生不一致的代码通常是一种反模式。

我的经验法则：

1. 如果您决定改变对象，请始终绑定。
2. 如果您只是将它作为道具从父级传递给子级而没有绑定，很可能它是子级本地状态的某种初始值，那么您不应该对其进行变异，因为这会影响父级。更改前请复印。

Answer 2

app.svelte

<script>
    import Component from './component.svelte'  
    let prop = 'test'
</script>
<div>
    From host: <strong>{prop}</strong>
</div>

<div>
    <h2>First: binded</h2>
    <Component bind:prop />
</div>

<div>
    <h2>Second: not binded</h2>
    <Component {prop} />
</div>

component.svelte

<script>
    export let prop
</script>

From component: {prop}
<input bind:value={prop} />

https://svelte.dev/repl/0e7bdfb4c5e14cdea306cf6f7e20ee5e?version=3.44.1

第二个组件不改变主机的值