Svelte реактивность не срабатывает при изменении переменной в функции

ответ @ johannchopin выявил проблему.

Вы можете прочитать мой блог для более подробного объяснения как работает реактивная декларация, вот tl; dr:

• Реактивные декларации выполняются пакетно.

  svelte пакетирует все изменения, чтобы обновить их в следующем цикле обновления, и перед обновлением DOM он выполнит реактивные объявления для обновления реактивных переменных.

• реактивные объявления выполняются в порядке их зависимости.

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

  let count = 0;
  $: double = count * 2;
  $: quadruple = double * 2;
  

  в этом случае quadruple зависит от double. поэтому независимо от порядка ваших реактивных объявлений, $: double = count * 2; перед $: quadruple = double * 2 или наоборот, первое должно быть и будет выполнено до второго.

  Svelte отсортирует объявления в порядке зависимости.

  В случаях, когда нет отношений зависимости друг от друга:

  $: validate(inputValue);
  $: if (rendered) updateInputValue(value);
  

  1-й оператор зависит от validate и inputValue, 2-й оператор зависит от rendered, updateInputValue и value, объявление остается в том порядке, в каком оно есть.

Теперь, зная эти два поведения реактивного объявления, давайте взглянем на ваш REPL.

Когда вы меняете inputValue, rendered или value, Svelte пакетирует изменения и запускает новый цикл обновления.

Прямо перед обновлением DOM Svelte выполнит все реактивные объявления за один раз.

Поскольку нет зависимости между операторами validate(inputValue); и if (rendered) updateInputValue(value); (как объяснялось ранее), они будут выполняться по порядку.

Если вы измените только rendered или value, 1-й оператор (validate(inputValue)) не будет выполняться, и аналогично, если вы измените inputValue, 2-й оператор (if (rendered) updateInputValue(value)) не будет выполняться.

Теперь в updateInputValue вы меняете значение inputValue, но поскольку мы уже находимся в цикле обновления, мы не будем начинать новый.

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

Итак, зная, что не так, есть несколько решений, которые вы можете найти.

1. Вручную измените порядок операторов реактивного объявления, особенно когда существует неявная зависимость порядка выполнения.

Посмотрите разницу в заказе реактивного объявления в этом REPL

Так что измените свой REPL на:

$: if (rendered) {
  updateInputValue(value);
}
$: validate(inputValue);

См. REPL

2. Явное определение зависимости в реактивных объявлениях

$: validate(inputValue);

$: if (rendered) {
    inputValue = updateInputValue(value);
}
    
function updateInputValue(val) {
    console.log('updateInputValue called!');
    if (!value) {
        return '';
    }
    else {
        return value;
    }
}

См. REPL

Действительно странно (и я не мог этого объяснить), но если вы поместите реактивный оператор $: validate(inputValue); после объявления функции updateInputValue, он будет работать, как ожидалось:

<script>
    import { onMount } from 'svelte';
    
    export let value;
    
    let rendered = false;
    let inputValue = '';

    function validate(val) {
        console.log('validation:', val);
    }
    
    onMount(() => {
      rendered = true;
   });
    
    $: if (rendered) {
        updateInputValue(value);
    }
    
    function updateInputValue(val) {
        console.log('updateInputValue called!');
        if (!value) {
            inputValue = '';
        }
        else {
            inputValue = value;
        }
    }
    
    $: validate(inputValue);
</script>

Проверьте этот REPL.

Вот минимальный пример проблемы исходного сообщения и несколько обходных путей:

<script>
  let nb
  let n=0
$: console.log("nb1:",nb)
$: update(n)
$: console.log("nb2:",nb)
function update(v) {
  console.log("update",v)
  nb = v
}
</script>
<h1 on:click={()=>n=Math.floor(Math.random()*100)}>click: {nb}</h1>
<h1 on:click={()=>update(Math.floor(Math.random()*100))}>click: {nb}</h1>

Первый журнал nb не запускается, когда n присваивается новое значение, а $: update(n) запускается из-за назначения. Второй журнал nb запускается, потому что он находится после присвоения nb.
Если update-функция вызывается напрямую (последняя h1), все работает.

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

 <script>
      let nb
      let n=0
    $: console.log("nb1:",nb)
    $: nb = update(n)
    $: console.log("nb2:",nb)
    function update(v) {
      console.log("update",v)
      return v
    }
    </script>
    <h1 on:click={()=>n=Math.floor(Math.random()*100)}>click: {nb}</h1>
    <h1 on:click={()=>update(Math.floor(Math.random()*100))}>click: {nb}</h1>

Я считаю это ошибкой.