苗条的内部原理：反应式声明语法如何工作

Question

关于svelte like中的反应式声明 $: doubled = count*2，它在svelte教程中指出：

如果这看起来有点陌生，请不要担心。这是有效的（如果是非常规的）JavaScript，Svelte会将其解释为意味着“只要任何引用的值发生更改，便重新运行此代码”。

常规的javascript功能引用似乎是标签（请确认）

请用简单的语言解释svelte编译器是如何完成的，并提供对编译器代码在[或开始发生]发生位置的引用。

尚有一个githb问题可以最终解释苗条的内部原理。

Answer 1

确实是标签语法。

Javascript标签几乎没有用处，因此这是一种创建简单语法以及确保其与linters和IDE兼容的绝佳方法。

在哪里可以找到代码：

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

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

怎么运行的 ：

编译器正在分析这些语句以查找要观察哪些变量的更改。这些变量是赋值运算符或函数调用中的每个参数的所有权利。值得注意的是，没有观察到const变量，因为它们永远都不会改变。

$: doubled = count * 2;

将编译为

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

$$ dirty是更新生命周期接收到的参数，它是一个对象，其中包含每个可能修改的变量的属性，在$$invalidate调用该变量时将其设置为1 。

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

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

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

仍将正确编译为

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

希望它可以帮助清除问题。