如何比较 Svelte 3 中的 Prop 变化

Question

Svelte 3 中是否有一种机制可以在渲染之前比较组件内部的 prop 变化？类似于 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}

如何比较 Svelte 3 中的 Prop 变化

How to compare Prop changes in Svelte 3

svelte

svelte-3