数据绑定

数据是页面展示中最重要的一环。

在React中，我们通过this.state来对变量进行声明存储，亦或是通过useState来操作；在Vue中，我们可以把数据放到data()方法的返回值里，亦或者使用ref、reactive来声明变量；而在Svelte中，我们则直接在script标签中正常声明，然后再在html标签里使用{}来包裹变量。

直接声明

<script>
  let count = 0;
</script>

<div>count: {count}</div>

 

属性里使用

除了在标签内容里显示，我们可以在标签属性里进行操作变量，比如我们常需要判断动态的样式class。

<script>
  let tab = 'hello'
</script>

<span class={tab === 'hello' ? 'active' : ''}>color text</span>

<style>
.active {
  color: blue;
}
</style>

在Svelte中，active的class还有缩写，我们在介绍样式的章节会继续说明。

数据更新

我们在上面只演示了如何声明和使用变量，但变量最为关键的特性便是——“变”，我们要如何更新声明的变量呢？

其实也是很简单，就像普通的操作一样。

<script>
  let count = 0;

  const updateCount = () => {
    if (count >= 5) {
      return;
    }
    count++;
    setTimeout(() => {
      updateCount();
    }, 1000);
  };

  updateCount();
</script>

<span>count: {count}</span>

在上述代码中，笔者声明了一个定时更新的方法，如果你执行上述代码，便能看到count在页面中按秒更新。从上述代码的写法中我们可以看到，声明和使用方法的方式和我们正常写原生js没有差别。

数组、对象的更新

如果你使用过Vue，那你一定知道在Vue中，对于数组的更新需要一些Hack操作。那在Svelte中呢？

这里笔者举个例子：

<script>
  let arr = [1];

  const updateArray = () => {
    arr.push(1);
    console.log(arr);
  };
</script>

<button on:click={updateArray}>update array</button>
<p>数组：{arr.join(",")}</p>

在这个例子中，如果我们点击按钮，会发现数组的内容在页面展示上完全没有更新，然而控制台里却能正常的打印出push后的数组内容。

是的，在Svelte中，数组的更新同样需要一些技巧。

Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates.

这是官网里的一句话：Svelte的反应性是由赋值语句触发的。这句话已经点出了关键问题：“赋值语句”。因此我们可以如下修改：

const updateArray = () => {
  arr.push(1);
  console.log(arr);
  arr = arr;
}

亦或者改成：

const updateArray = () => {
  arr = [...arr, 1]
}

对于其他一些数组的操作方法，我们可以按此思路来替换：

const pushNumber = () => {
  arr = [...arr, lastNumber];
}
const popNumber = () => {
  arr = [...arr.slice(0, arr.length - 1)]
}
const unshiftNumber = () => {
  arr = [firstNumber, ...arr];
}
const shiftNumber = () => {
  arr = [...arr.slice(1, arr.length)]
}

对象在更新时也有一点需要注意，举个例子：

<script>
  let obj = {
    foo: {
      bar: "hello",
    },
  };
  let bar = obj.foo.bar;
  bar = "world";
</script>

<p>对象：{obj.foo.bar}</p>

在页面上，我们看到的仍是hello，要想更新，需要如下写法：

<script>
  let obj = {
    foo: {
      bar: "hello",
    },
  };
  obj.foo.bar = "world";
  // let bar = obj.foo.bar;
  // bar = 'world'
</script>

<p>对象：{obj.foo.bar}</p>

官网也细心地给了我们提示：被更新的变量的名称必须出现在赋值语句的左侧