Svelte：$: 是什么意思？

Question

这是 Svelte 组件的片段：

<script>
  let radius = 10;
  $: area = Math.PI * radius ** 2;

  // ...
</script>

有人可以解释一下 area 变量之前的 $: 的目的是什么吗？提前致谢。

Answer 1

在 Svelte 中是 reactive declaration。

这是 JavaScript 中的有效标签语句，Svelte 将其解释为 're-run this code whenever any of the referenced values change'

Answer 2

它被称为响应式声明。就像每当发生更新时您的组件都会重新呈现一样，响应式声明也会发生同样的情况。

<script>
  let radius = 10;
  area = Math.PI * radius ** 2;

  // ...
</script>

这将面积设置为 Math.PI * 10 **2，但假设稍后函数将半径更改为 20。那么面积将不会改变并保持原样。这就是响应式声明派上用场的地方。如果半径改变，面积会重新计算并改变。

Svelte: What does $: mean?