Это метка в JavaScript.
Интересный момент здесь заключается в том, как Svelte использует это для привязки переменных к другим переменным. Вот часть видео, где Рич Харрис объясняет это .
По существу, в 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.Это компиляция, которая делает магию;)