Использование свойств распространения вместо всего объекта при передаче данных компоненту

Чтобы передать данные в компонент Svelte, вы можете использовать свойства распространения, например

<MyComponent {...dataObject} />

Однако вы также можете передать сам объект данных

<MyComponent {dataObject} />

Мне непонятно, в чем преимущество использования первой конструкции (почему она существует). Разве прохождение самого объекта не всегда четче и быстрее?


svelte svelte-3
person rmuller    schedule 12.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, передача объекта более явна и проще для компилятора для оптимизации, поэтому в большинстве случаев IMO должен быть предпочтительным подходом.

Я считаю, что синтаксис распространения следует использовать только тогда, когда он дает явное и важное преимущество, то есть когда очевидно, что он лучше, и вы бы не стали задавать такой вопрос;)

Такие ситуации обычно возникают, когда компонент представляет собой своего рода тонкую обертку вокруг другого, где спред будет использоваться вместе со специальными переменными $$props или $$restProps.

<script>
  export let child
</script>

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

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

Кроме того, когда вы вычисляете множество свойств, которые нужно передать компоненту, синтаксис распространения может помочь сделать вашу разметку более читаемой. И если вы передадите те же реквизиты нескольким дочерним элементам, это может помочь высушить ваш код.

<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" />
person rixo    schedule 12.11.2020