開始撰寫程式碼

在設定好基本的結構後我們將要開始進入 svelte 程式碼的撰寫，今天會教授大家怎麼宣告變數，以及使用變數。

本文同步放置於此

變數的類型

相信熟悉javascript的大家都知道有三種方式來宣告變數，他分別為var、let跟const，在svelte也是有這些宣告變數的方式。

變數的使用

當然我們可以拿變數來運算，來儲存結果，除此之外在svelte可以直接拿來用在html上，而且語法相當簡單，就拿前一篇的例子App.svelte來介紹，各位可以先看看下面的例子。

<script>
  let name = 'kirai';
</script>

<h1>Hello {name}!</h1>

其中name是我們的變數，我們可以賦予他一個值，接下來我們在html的標籤內使用{}把變數name包起來，當網頁被渲染時他不會出現{name}而是將我們賦予的值渲染出來。

畫面更新的依據

初學者會遇到一個問題就是為什麼我變更陣列的內容但是畫面上還是舊的，svelte不是會自動渲染嗎？這個答案是資料變更是svelte會刷新畫面，但是僅限於賦值。

用例子來解釋就是以下兩種才會觸發重新渲染：

let varA = 1;
varA = 2;
varA ++;

這三種都是賦值，然而陣列的元素變化不是賦值，所以說陣列的.push()和.splice()不會觸發重新渲染。

這樣很不方便對吧，不過後續會有更進一步說明如何強制渲染，甚至於定期更新。

小結

相信大家都對於變數很熟悉，如果不熟悉的話建議可以回去看一下javascript的說明，再來{}應該大家在其他地方也寫過所以應該不陌生，希望大家喜歡今天的內容，明天筆者將會介紹跟變數很有關係的屬性。