Как сравнить изменения в Prop в Svelte 3

Question

Есть ли в Svelte 3 механизм для сравнения изменений реквизита внутри компонента перед рендерингом? Аналогично React getDerivedStateFromProps .

<script>
 export let color;

  // Does anything like this exist in Svelte?

  beforeUpdate((changes) => {
     const same = changes.prev.color === changes.next.color
  })
</script>

Answer 1

Если вы хотите выполнить фрагмент кода только при изменении color, вы можете использовать реактивное объявление:

<script>
  export let color;

  $: {
     console.log('color changed', color);
     // will only get called when the `color` changed.
  }
</script>

Но если вы хотите выполнить этот фрагмент кода как с текущим значениеми предыдущее значение, вы можете сделать следующее:

<script>
  export let color;
  let prevColor;

  $: {
     console.log('currentColor:', color, 'prevColor:', prevColor);
     prevColor = color;
  }
</script>