引言

如果你是一個想學習如何使用Svelte反應式變量和函數(shù)的Web開發(fā)者，那么這篇文章就是為你準備的。今天我們將學習Svelte中的反應性是如何工作的，以及當我們給現(xiàn)有變量分配一個新值時，它是如何更新我們的用戶界面的。

我們還將看看Svelte的反應性是如何用實際的代碼片斷創(chuàng)建的。最后，我們將學習如何使用函數(shù)來更新Svelte Reactive語句，以及如何在我們的Reactive代碼中使用一些邏輯。

讓我們開始吧!

Svelte中的反應式賦值

在Svelte中，我們所做的每一個賦值都是反應式的。因此，每當我們存儲在一個變量中的值發(fā)生變化時，整個組件都會更新。

讓我們從一個簡單的例子開始。這里我們有一個叫做peopleCount的變量，它的初始化值是 "0"：

<script>
  export let name;
  let peopleCount= 0;
  function addPerson() {
    personCount = personCount+ 1
  }
</script>
<p>Welcome, {name}!</p>
<p>We have {peopleCount} people in our app</p>
<button on:click="{addPerson}">Add Person</button>

注意，我們把它嵌入到我們的HTML中的第二個

標簽中。

每當我們點擊我們的按鈕，我們就會調用 ***addPerson()***函數(shù)，這又會使我們的人數(shù)增加一個。與vanilla JavaScript發(fā)生的情況不同，每次我們做這個改變時，我們的整個用戶界面都會被重新渲染。

這就是我們所說的反應性。

然而，Svelte的反應性只在分配的變量被直接用=操作符更新時才會被觸發(fā)，這可能會導致一些棘手的問題。例如，如果你向一個現(xiàn)有的數(shù)組推送一個新的值，你必須手動更新該組件，以顯示該變化。

將Svelte語句標記為反應式

Svelte的一個主要特點是，它使用非常簡單的語法來聲明反應式變量。例如，下面的代碼片段顯示了一個簡單的Svelte組件，包括兩個反應式變量：

<script>
 export let person = "john";
 $: upperCaseName = person.toUpperCase();
</script>

在這段代碼中，第一條語句聲明了一個非反應式變量，簡單地稱為 "name"。第二條語句是反應性的，并依賴于我們聲明的第一條語句。這意味著，每當我們的第一個變量的值被更新時，我們也在間接地改變 "upperCaseName "的值。

當我們使用Svelte時，每當我們的組件的值發(fā)生變化時，反應式語句就會在組件加載前運行。另外，注意到我們不需要使用保留關鍵字let 來聲明我們的第二個變量。Svelte在幕后做了這些。

我們可以用這種方式將變量和函數(shù)一起聲明。例如，如果我們聲明一個名為 changePerson():

<script>
  export let person= "john";
  $: upperCaseName = person.toUpperCase();
  function changePerson() {
    name = "mike"
  }
</script>
<p>Welcome to our app, {person}!</p>
<button on:click="{changePerson}">Change Person's Name</button>

在這個簡單的例子中，這個按鈕調用 ***changePerson()***函數(shù)，反過來修改我們存儲在 "name "中的值。當這個變量發(fā)生變化時，它會自動導致第二個語句被觸發(fā)，從而改變我們最初保存在 upperCaseName 中的值。

我們可以在反應塊中使用邏輯嗎？

答案是肯定的。如果我們想處理更復雜的數(shù)據(jù)，我們可以在**$:**語句中添加任何種類的邏輯（例如，一個循環(huán)或一個條件）。

例如。

<script>
  export let person= "john";
  let personCount = 0;
  $: upperCaseName = person.toUpperCase();
  $: if (person === "mike") {
    personCount = 2
  }
function changePerson() {
    name = "mike"
  }
</script>

正如你在代碼中可能發(fā)現(xiàn)的那樣，當我們調用方法 changePerson() 并更新我們的存儲值時，我們在第二個**$:**語句中聲明的條件被觸發(fā)。這類似于Vue或React等其他框架中計算變量的工作方式。

使用Svelte，我們可以很容易地 "監(jiān)聽 "一段代碼，比如一個函數(shù)，并在特定情況發(fā)生時對另一個變量進行更改。這樣做的好處是使我們的代碼更具有聲明性，因此，更容易閱讀和理解。

以上就是Svelte反應式變量和函數(shù)工作原理詳解的詳細內容，更多關于Svelte反應式變量函數(shù)的資料請關注腳本之家其它相關文章！

最新評論