slim 的内部结构 : how does reactive declaration syntax work

Question

关于像 slim 一样的响应式(Reactive)声明$: doubled = count*2 ，它在 svelte tutorial 中说明那

Don't worry if this looks a little alien. It's valid (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'

常规的 javascript 功能引用似乎是 labels (请确认)

请用简单的语言解释 svelte 编译器如何完成此操作，并提供对编译器代码中发生这种情况 [或开始发生] 的位置的引用

有一个 githb issue最终可以解释纤细的内部结构。

Answer 1

这确实是标签语法。

Javascript 标签几乎没有用处，因此它是一种优雅的方式来创建简单的语法，并确保它可以与 linter 和 IDE 配合使用。

在哪里可以找到代码:

代码编译完成后，您可以在 中找到响应式(Reactive)声明。状态更新 组件生命周期的一部分。然而，这段代码不会在与 相关的 beforeUpdate 和 afterUpdate 之间执行。 DOM 更新 .如果您更改这些回调中的值，您可能会得到一些古怪的结果，因为响应式语句可能不会更新。

如果你寻找 $$self.$$.update，你可以在代码中找到它。 .

工作原理:

编译器正在分析这些语句以找出要观察哪些变量的变化。这些变量是赋值运算符的所有权利，或者是函数调用中的每个参数。值得注意的是，不会观察到 const 变量，因为它们永远不应该改变。
$: doubled = count * 2;
将编译为
if ($$dirty.count) { $$invalidate('doubled', doubled = count * 2); }
$$dirty 是更新生命周期收到的参数，它是一个对象，包含每个可能被修改的变量的属性，当 $$invalidate 时设置为 1。被称为它。

Svelte 然后在生命周期的更新部分的末尾添加这些语句，并根据上述观察变量中至少一个的变化来调节它们的执行。

Svelte 还按拓扑顺序对这些语句进行排序。这意味着使用另一个 react 性语句结果的 react 性语句将在之后进行评估。无论您以何种顺序将它们放入代码中。

$: quadrupled = doubled * 2;
$: doubled = count * 2;

仍将正确编译为

if ($$dirty.count) { $$invalidate('doubled', doubled = count * 2); }
if ($$dirty.doubled) { $$invalidate('quadrupled', quadrupled = doubled * 2); }

希望它有助于澄清事情。