亲宝软件园·资讯

展开

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

Jovie 人气:0

引言

如果你是一个想学习如何使用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,我们可以很容易地 "监听 "一段代码,比如一个函数,并在特定情况发生时对另一个变量进行更改。这样做的好处是使我们的代码更具有声明性,因此,更容易阅读和理解。

加载全部内容

相关教程
猜你喜欢
用户评论