为什么 svelte 将花括号放在标量上？

Question

例如来自文档的这个：

<canvas
    width={32}
    height={32}
></canvas>

花括号在这里有什么作用？

Answer 1

在您展示的示例中，它没有任何区别。以下是等价的。

<canvas width={32} height={32}></canvas>
<canvas width="32" height="32"></canvas>

但是，使用花括号会导致 Svelte 将其解释为 JavaScript 表达式。这意味着您可以在花括号内进行数学运算...

<canvas width={32 + 8} height={32 - 8}></canvas>

...或将其换成变量。

<script>
  let size = 40;
</script>

<canvas width={size} height={size}></canvas>

总是写花括号意味着如果您想稍后使值动态化，它可以节省一些击键次数，否则不会影响组件的呈现方式。