Как в Svelte JS работает реактивная переменная, если какая-то переменная просто выводится, но не участвует в выдаче значения?

Question

Код в https://svelte.dev/repl/f8db4771ba794c658d7c25a6e72d1b46?version=3.18.1

имеет две "реактивные переменные":

$: nameUpperCase = name.toUpperCase();

$: if (name === "city") { 
    console.log("RUNNING HERE 01", age);
} else {
    console.log("RUNNING HERE 02", age);
}

если стоимость name изменения, то nameUpperCaseтоже меняются. Это просто.

Но для второй части, похоже, когда значение name или age изменяется, то ifлиния оценивается. Еслиage удален из console.log(), как в https://svelte.dev/repl/68c2cdea2bfd462caa5ac5519fb8b99d?version=3.18.1, тогда не имеет значения, еслиageизменения. Вif линия не оценивается.

Но age никогда не участвуйте в генерации окончательного значения для ifзаявление. Он просто распечатывается, аconsole.log всегда возвращайся undefined. Так что это за правило? Каким-то образом Svelte "волшебным образом" собирает все переменные после$:, а затем, если какой-либо из них изменится, выполнить строку после $:? Значит, даже если переменная не участвует в формировании какого-то окончательного значения, она все равно считается?

Answer 1

Судя по формулировке вашего вопроса, я думаю, что "да" будет правильным ответом.

Он работает точно так, как вы описали: когда любая переменная в реактивном блоке изменяется, блок выполняется.

Это правило. Просто. Предсказуемо. Видите, как вы сами все правильно интуитивно это поняли?

Это не больше (или меньше) волшебство, чем автоматическое отражение значения переменных в вашем представлении. Svelte уже знает обо всех переменных (верхнего уровня) в вашем коде для этого.

Не имеет значения, производит ли реактивный блок значение или нет (реактивное объявление или оператор). Это просто "все переменные".

Если вы хотите исключить переменную из наблюдения, извлеките обработку, которая ее использует, из реактивного блока:

// runs when `name` or `age` change
$: if (name === "city") { 
    console.log("RUNNING HERE 01", age);
} else {
    console.log("RUNNING HERE 02", age);
}

const logAge = msg => console.log(msg, age)

// only runs when `name` changes
$: if (name === "city") { 
    logAge("RUNNING HERE 01");
} else {
    logAge("RUNNING HERE 02");
}

Answer 2

Ты прав. Реактивность Svelte основана на задании.

В API сказано следующее:

Любой оператор верхнего уровня (т.е. не внутри блока или функции) можно сделать реактивным, поставив перед ним префикс $: . Реактивные операторы запускаются непосредственно перед обновлением компонента всякий раз, когда изменяются значения, от которых они зависят.