如何比较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>

Answer 2

我实际上已经编写了一个包，它使用Svelte Stores为您提供了一个简单的接口，可以根据需要引用任意多个以前的值。

Svelte Previous。

<script>
export let color;
const [currentColor, previousColor] = usePrevious(color);
$: $currentColor = color;
</script>
{$previousColor} to {$currentColor}