Реактивные утверждения в Svelte

Как работать с реактивными утверждениями в Svelte

В Svelte вы можете отслеживать изменения в состоянии компонента и обновлять другие переменные.

Например, если у вас естьcountПеременная:

<script>
let count = 0
</script>

и вы обновляете его, нажав кнопку:

<script>
let count = 0

const incrementCount = () => { count = count + 1 } </script>

{count} <button on:click={incrementCount}>+1</button>

Вы можете следить за изменениями наcountиспользуя специальный синтаксис$:который определяет новый блок, который Svelte будет повторно запускать при изменении любой указанной в нем переменной.

Вот пример:

<script>
let count = 0

const incrementCount = () => { count = count + 1 }

$: console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) </script>

{count} <button on:click={incrementCount}>+1</button>

Я использовал блок:

$: console.log(`${count}`)

Вы можете написать более одного из них:

<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>

И вы также можете добавить блок, чтобы сгруппировать более одного оператора:

<script>
$: {
  console.log(`the count is ${count}`)
  console.log(`double the count is ${count * 2}`)
}
</script>

Я использовал там вызов console.log (), но вы также можете обновить другие переменные:

<script>
let count = 0
let double = 0

$: { console.log(the count is </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) double = count * 2 console.log(double the count is </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) } </script>

Скачать мою бесплатнуюСправочник Svelte


Более стройные уроки: