javascript - $: 在 Svelte 中是如何工作的

Question

正在阅读 svelte 教程，其中提到 $: 这是 JavaScript 中的常规，但不明白。

let count = 0;
$: doubled = count * 2;

你会如何在原版 JavaScript 中做到这一点。检查已更改的代码

Answer 1

在这种情况下，我认为他们正在谈论称为“标签”的编程语言语法功能。如果是 JS，您可以在这里阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

需要仔细查看Svelte源代码，但我猜他们使用这种有效的JS语法模式$:来标记顶级语句并允许它们稍后解析和预处理。

所以这不是一个黑色的 JS 魔法，而是一个只在 Svelte “世界”中的约定。

更新：

如果您想遵循逻辑，请查看“LabeledStatement”的用法。

Answer 2

你会如何在原版 JavaScript 中做到这一点。检查已更改的代码

对此有多种方法。例如。通过比较以前的 values 和当前的 values 来进行脏检查，从而确定更改。这种方法有一些缺点。其中，由于所有必要的比较，数据可能会重复，并且对于大量数据，性能可能会降低。

另一种方法是使依赖项显式化，并且仅在其中一个依赖项更改时更新。 Svelte 自动生成所需的代码，但也可以手动完成。如果您查看生成的代码，您会发现变量被标记为无效，这会触发对因变量的更新。

例如。在增加计数变量的单击处理程序中，您将获得：

const click_handler = () => $$invalidate(0, count++, count);

对于响应式语句，代码仅在 count 已更改时运行：

$$self.$$.update = () => {
    if ($$self.$$.dirty & /*count*/ 1) {
        $: doubled = count * 2;
    }
};

不过，此代码针对性能进行了优化。它使用数组索引来实现更快的数据访问和更精简的代码。对于旨在由人类编写和阅读的代码，您可能不想这样做。一般来说，我不建议以任何方式手动执行此操作；它更冗长，您必须确保始终正确指定依赖项才能使其正常工作。

Answer 3

$: 是特殊的 Svelte 语法，在原版 javascript 中不起作用。

该语法与普通的 javascript 兼容（它是一个 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label），因此像 javascript 解析器和荧光笔这样的工具不会中断。

但是原版 javascript 没有内置任何反应性，因此它的行为非常不同。

（它忽略了 $:）

回答1