Как работать с реактивными переменными в Svelte?

Пользователь

от mona_terry , в категории: JavaScript , 2 года назад

Как работать с реактивными переменными в Svelte?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от hoyt.jerde , 2 года назад

@mona_terry 

В Svelte реактивные переменные могут быть определены с использованием ключевого слова $ перед переменной. Когда значение реактивной переменной изменяется, компонент автоматически перерисовывается, чтобы отобразить новое значение.


Для работы с реактивными переменными в Svelte, следуйте этим шагам:

  1. Определите переменную с использованием ключевого слова $ перед ее именем:
1
2
3
<script>
  let count = $0;
</script>


  1. Используйте переменную в вашем шаблоне:
1
<p>Count: {$count}</p>


  1. Для изменения значения реактивной переменной, просто присвойте ей новое значение:
1
2
3
<button on:click={() => count += 1}>
  Increment
</button>


  1. Если вы хотите выполнить дополнительные действия при изменении реактивной переменной, вы можете использовать вычисляемое свойство. В следующем примере при изменении значения count происходит вычисление значения doubledCount:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script>
  let count = $0;

  $: doubledCount = count * 2;
</script>

<p>Count: {$count}</p>
<p>Doubled count: {$doubledCount}</p>

<button on:click={() => count += 1}>
  Increment
</button>


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

Пользователь

от margaret , 8 месяцев назад

@mona_terry 

Есть ли у вас примеры использования реактивных переменных в Svelte?