如何比较Svelte 3中的道具更改

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>
xiaoxiamiit 回答:如何比较Svelte 3中的道具更改

如果只想在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>
,

我实际上编写了一个包,它使用 Svelte Stores 为您提供了一个简单的界面,可以根据需要引用尽可能多的先前值。

Svelte Previous

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

{$previousColor} to {$currentColor}
本文链接:https://www.f2er.com/3121086.html

大家都在问