Есть ли в 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>
Если вы хотите выполнять фрагмент кода только при изменении 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>
prevColor вызвать другой реактивный оператор, где используется prevColor.
- person thecodejack; 06.01.2020
На самом деле я написал пакет, который использует Svelte Stores, чтобы дать вам простой интерфейс для ссылки на столько предыдущих значений, сколько вам нужно.
<script>
export let color;
const [currentColor, previousColor] = usePrevious(color);
$: $currentColor = color;
</script>
{$previousColor} to {$currentColor}
