28

svelte在查看库时，我在 JS 中遇到了以下有效语法：

$: doubled = 6 * 2;

起初，我认为它是特定于库的，但它适用于 Chrome 控制台。这是什么语法？

它可以是任何东西：

name: something = 6 * 2;
4

5 回答 5

22

任何 JavaScript 语句（除函数声明外的种类）都可以在标签前添加：

foo: var x = 0;

你所拥有的是这样的：

$: doubled = 6 * 2;

在您的声明中，“$”是标签。

标记语句没有多大意义，因为gotoJavaScript 中没有。两者都break可以continue包含一个封闭循环的标签，以指示应该涉及多少“层”。

wholeLoop:
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] == null)
      // Oh no! This is terrible
      break wholeLoop;
  }
}

规范_ _

以上所有内容都非常正确，但显然 Svelte 将其自己的构建时预处理器应用于组件源代码并将其转换为发送到浏览器的实际 JavaScript。标签语法的这种使用被他们“劫持”为某种含义。见昆汀的回答。

于 2019-04-24T13:07:17.550 回答
17

这是 JavaScript 中的标签。

这里有趣的一点是 Svelte 如何使用 this 将变量绑定到其他变量。这是 Rich Harris 解释这一点的视频的一部分。

本质上，在 Svelte 中，$:意味着每当这些值发生变化时重新运行

如果我们看一下 Svelte 的反应式声明示例中的示例，

<script>
    let count = 1;

    // the `$:` means 're-run whenever these values change'
    $: doubled = count * 2;
    $: quadrupled = doubled * 2;

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Count: {count}
</button>

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

变量doubled和quadrupled有$标签。因此，它们将在count或doubled分别更改时再次计算。

如果你看一下编译后的代码，你可以看到

let doubled, quadrupled;
$$self.$$.update = ($$dirty = { count: 1, doubled: 1 }) => {
    if ($$dirty.count) { $$invalidate('doubled', doubled = count * 2); }
    if ($$dirty.doubled) { $$invalidate('quadrupled', quadrupled = doubled * 2); }
};

因此，每次更新发生时，都会对这些变量进行脏检查并进行更新。

综上所述。$:在 Svelte 中与 JavaScript 标签没有任何关系。这是 Svelte 编译器拥有更新这些变量的代码的指令。$:当然是有效的语法，但在 Svelte 的上下文之外，它不会像在 Svelte 中那样做。神奇的是编译；）

于 2019-04-25T09:58:34.613 回答
12

在 JavaScript 中，它是一个标签，旨在与嵌套循环一起使用break和continue结合使用（因此您可以选择要中断或继续的循环）。

Svelte 似乎使用了某种技巧来赋予它另一种含义。请参阅教程：

当组件的状态发生变化时，Svelte 会自动更新 DOM。通常，组件状态的某些部分需要从其他部分计算（例如从名字和姓氏派生的全名），并在它们发生变化时重新计算。

对于这些，我们有响应式声明。它们看起来像这样：

let count = 0;
$: doubled = count * 2;
于 2019-04-24T13:08:17.750 回答
4

要为已提供的答案添加更多详细信息：

  • 它本质上定义了 Svelte 中的“命运运算符”（命运运算符是“反应式编程”的一般概念）
  • 命运运算符确保在计算变量的值发生更改时更新变量）

Rich Harris（Svelte 的创建者）不久前写了一篇关于使用命运运算符的文章，很好地解释了这个概念（尽管当时他并没有特别建议使用$：

https://gist.github.com/Rich-Harris/aa3dc83d3d8a4e572d9be11aedc8c238

于 2020-06-17T04:59:09.980 回答
1

特别是对于 Svelte.js，$: 将语句标记为“反应性”意味着它将根据后面的变量进行更新 - 正如其他人也在 javascript 中写的那样，这是一个标签，但在 svelte 中它具有特殊含义。

于 2020-07-14T02:51:50.173 回答