即時反應

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

小結

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