引言

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

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

讓我們開始吧!

Svelte中的反應(yīng)式賦值

在Svelte中，我們所做的每一個(gè)賦值都是反應(yīng)式的。因此，每當(dāng)我們存儲(chǔ)在一個(gè)變量中的值發(fā)生變化時(shí)，整個(gè)組件都會(huì)更新。

讓我們從一個(gè)簡(jiǎn)單的例子開始。這里我們有一個(gè)叫做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中的第二個(gè)

標(biāo)簽中。

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

這就是我們所說的反應(yīng)性。

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

將Svelte語句標(biāo)記為反應(yīng)式

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

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

在這段代碼中，第一條語句聲明了一個(gè)非反應(yīng)式變量，簡(jiǎn)單地稱為 "name"。第二條語句是反應(yīng)性的，并依賴于我們聲明的第一條語句。這意味著，每當(dāng)我們的第一個(gè)變量的值被更新時(shí)，我們也在間接地改變 "upperCaseName "的值。

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

我們可以用這種方式將變量和函數(shù)一起聲明。例如，如果我們聲明一個(gè)名為 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>

在這個(gè)簡(jiǎn)單的例子中，這個(gè)按鈕調(diào)用 ***changePerson()***函數(shù)，反過來修改我們存儲(chǔ)在 "name "中的值。當(dāng)這個(gè)變量發(fā)生變化時(shí)，它會(huì)自動(dòng)導(dǎo)致第二個(gè)語句被觸發(fā)，從而改變我們最初保存在 upperCaseName 中的值。

我們可以在反應(yīng)塊中使用邏輯嗎？

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

例如。

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

正如你在代碼中可能發(fā)現(xiàn)的那樣，當(dāng)我們調(diào)用方法 changePerson() 并更新我們的存儲(chǔ)值時(shí)，我們?cè)诘诙€(gè)**$:**語句中聲明的條件被觸發(fā)。這類似于Vue或React等其他框架中計(jì)算變量的工作方式。

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

以上就是Svelte反應(yīng)式變量和函數(shù)工作原理詳解的詳細(xì)內(nèi)容，更多關(guān)于Svelte反應(yīng)式變量函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論