第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY09-$ 的用法就是即時反應

即時反應

在之前跟大家分享了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的計算

小結

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *