将数据传递给组件时使用扩展属性与整个对象

Question

要将数据传递到 Svelte 组件中，您可以使用扩展属性，例如

<MyComponent {...dataObject} />

不过，您也可以传递数据对象本身

<MyComponent {dataObject} />

对我来说，不清楚使用第一个构造的优势是什么（所以，它存在的原因）。传递对象本身不是总是更清晰更快吗？

Answer 1

是的，传递 object 更明确，编译器更容易优化，因此在大多数情况下，IMO 应该是首选方法。

我认为传播语法只有在它提供了明确而重要的好处时才应该使用，也就是说，当它明显更好并且你不会问这样的问题时;)

当一个组件是围绕另一个组件的一种薄包装时，通常会出现这种情况，其中传播将与特殊的 $$props 或 $$restProps 变量一起使用

<script>
  export let child
</script>

<main>
  <svelte:component this={child} {...$$restProps} />
</main>

<style>
  main {
    border: 1px solid red;
  }
</style>

此外，当您计算要传递给组件的大量道具时，扩展语法有助于使您的标记更具可读性。如果你将这些相同的道具传递给多个 children，它可以帮助你的代码变干。

<script>
  import { foo, bar, baz, bat, man, ... } from './util.js'

  export let input

  $: props = {
    foo: foo(input),
    bar: bar(input),
    baz: baz(input),
    bat: bat(input),
    man: man(input),
    ...
  }
</script>

<Child {...props} id="1" />

<Child {...props} id="2" />

将数据传递给组件时使用扩展属性与整个对象

Using spread properties versus the whole object when passing data to a component

svelte

svelte-3