iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

即時反應

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

小結

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


上一篇
DAY08-if else也可以喔
下一篇
DAY10-html 事件處理
系列文
前端工程的另一個選擇 Svelte 30

尚未有邦友留言

立即登入留言