响应
Svelte的核心是一个强大的响应系统，可以使DOM与应用程序状态保持同步ーー例如，响应一个事件。
为了演示它，我们首先需要触发一个事件的程序:
<button on:click={handleClick}>
在handleClick函数中，我们需要做的就是改变 count 的值：
function handleClick() {
count += 1;
}
完整代码：
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
响应声明
当组件的状态发生变化时，Svelte会自动更新DOM。通常，组件状态的某些部分需要从其他部分计算(例如从firstname和lastname派生的fullname) ，并在它们发生更改时重新计算。
对于这些，我们这样做声明：
let count = 0;
$: doubled = count * 2;
不要担心，这看起来虽然有点怪异，但它是有效的JavaScript，Svelte将其解释为“当任何引用的值发生变化时，运行这段代码”。一旦你习惯了，就回不去了。
让我们在HTML中实现翻倍效果：
<p>{count} doubled is {doubled}</p>
当然，您可以只在HTML中编写{count * 2} ，而不必使用响应。当您需要多次引用响应时，或者您的值依赖于其他响应时，响应就变得特别有价值。
完整代码：
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
我们并不局限于响应变量ーー我们也可以在响应中运行任意语句。例如，如果count的值发生变化，我们可以打印输出：
$: console.log(`the count is ${count}`);
你也可以很容易地将语句组合成一个代码块：
$: {
console.log(`the count is ${count}`);
alert(`I SAID THE COUNT IS ${count}`);
}
你甚至可以把$:放在判断分支之类的语法前面：
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
完整的代码如下：
<script>
let count = 0;
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
更新数组和对象
因为Svelte的响应是由赋值触发的，所以使用像push和splice这样的数组方法不会自动导致更新。
解决这个问题的一个方法是添加一段改变数组长度的代码：
function addNumber() {
numbers.push(numbers.length + 1);
numbers = numbers;
}
但是还有一个更为简洁的解决方案：
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}
您可以使用类似的模式来替换pop、shift、unshift和concat。
对数组和对象属性的赋值ーー例如obj.foo+=1或array[i]=x--与对值本身的赋值工作方式相同。
function addNumber() {
numbers[numbers.length] = numbers.length + 1;
}
一个简单的经验法则：更新后的变量的名称必须出现在赋值的左侧。比如这个：
const foo = obj.foo;
foo.bar = 'baz';
obj.foo.bar是不会更新的，除非你用obj=obj。
完整代码：
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}
$: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>
Add a number
</button>
如果想亲自演练以上的功能，可以稳步到Sevlte官网教程中亲自体验：reactive
网友评论