Svelte反应式变量和函数工作原理详解

引言

如果你是一个想学习如何使用Svelte反应式变量和函数的Web开发者，那么这篇文章就是为你准备的。今天我们将学习Svelte中的反应性是如何工作的，以及当我们给现有变量分配一个新值时，它是如何更新我们的用户界面的。

我们还将看看Svelte的反应性是如何用实际的代码片断创建的。最后，我们将学习如何使用函数来更新Svelte Reactive语句，以及如何在我们的Reactive代码中使用一些逻辑。

让我们开始吧!

Svelte中的反应式赋值

在Svelte中，我们所做的每一个赋值都是反应式的。因此，每当我们存储在一个变量中的值发生变化时，整个组件都会更新。

让我们从一个简单的例子开始。这里我们有一个叫做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()***函数，这又会使我们的人数增加一个。与vanilla JavaScript发生的情况不同，每次我们做这个改变时，我们的整个用户界面都会被重新渲染。

这就是我们所说的反应性。

然而，Svelte的反应性只在分配的变量被直接用=操作符更新时才会被触发，这可能会导致一些棘手的问题。例如，如果你向一个现有的数组推送一个新的值，你必须手动更新该组件，以显示该变化。

将Svelte语句标记为反应式

Svelte的一个主要特点是，它使用非常简单的语法来声明反应式变量。例如，下面的代码片段显示了一个简单的Svelte组件，包括两个反应式变量：

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

在这段代码中，第一条语句声明了一个非反应式变量，简单地称为 "name"。第二条语句是反应性的，并依赖于我们声明的第一条语句。这意味着，每当我们的第一个变量的值被更新时，我们也在间接地改变 "upperCaseName "的值。

当我们使用Svelte时，每当我们的组件的值发生变化时，反应式语句就会在组件加载前运行。另外，注意到我们不需要使用保留关键字let 来声明我们的第二个变量。Svelte在幕后做了这些。

我们可以用这种方式将变量和函数一起声明。例如，如果我们声明一个名为 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()***函数，反过来修改我们存储在 "name "中的值。当这个变量发生变化时，它会自动导致第二个语句被触发，从而改变我们最初保存在 upperCaseName 中的值。

我们可以在反应块中使用逻辑吗？

答案是肯定的。如果我们想处理更复杂的数据，我们可以在**$:**语句中添加任何种类的逻辑（例如，一个循环或一个条件）。

例如。

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

正如你在代码中可能发现的那样，当我们调用方法 changePerson() 并更新我们的存储值时，我们在第二个**$:**语句中声明的条件被触发。这类似于Vue或React等其他框架中计算变量的工作方式。

使用Svelte，我们可以很容易地 "监听 "一段代码，比如一个函数，并在特定情况发生时对另一个变量进行更改。这样做的好处是使我们的代码更具有声明性，因此，更容易阅读和理解。