即時反應

在之前跟大家分享了 svelte 在 html 上操作的語法，也分享了如何在 html 上渲染變數，然後也提到更新畫面的規則及限制，今天要跟大家分享如何即時反應。

原來的javascript怎麼做

在原來的javascript是使用interval或是timeout來不斷更新，但是變數更新相對會造成整個畫面重新渲染。

然而在svelte的變數會偵測賦值來驅動渲染，不過其他沒有變更的變數不會隨著變更，可以先看以下式子。

<script>
    let count = 1;

    // the `$:` means 're-run whenever these values change'
    let doubled= count * 2;
    let 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都不會變更，要doubled跟quadrupled隨著count的變更而變更就要看這接下來要分享的東西

svelte的$

在這裏分享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>

所以只是稍稍修改一個小地方， svelte 就能夠即時更新，而且更新不是不停止的更新，而是當 count 變動時才會驅動 doubled 跟 quadrupled 的計算

小結

今天先跟大家分享即時反應的方法，眼尖的讀者們應該已經看到沒看過的東西，沒錯明天再告訴大家怎麼綁定事件跟驅動方法。