1、触发反应性的核心——赋值
Svelte 的核心是功能强大的响应式系统，用于使 DOM 与你的应用程序状态保持同步，例如响应事件。
<script>
let count = 0;
function handleClick() {
// 事件处理代码写在这儿
}
</script>
<button>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>为了演示它，我们首先需要连接一个事件处理程序。用以下内容替换 button 的开始标记：
<button on:click={handleClick}>在handleClick函数里，我们要编写代码更改count的值：
function handleClick() {
count += 1;
}
Svelte 会针对这个赋值生成一些代码，该代码告诉 DOM 什么地方需要更新。
2、声明
当组件的状态更改时，Svelte 会自动更新 DOM。
通常，组件状态的某些部分需要从 其他 部分中计算得出（例如，fullname 系由 firstname 和 lastname 组合而成），并在每次更改时重新计算。
对于这些，我们有 响应式声明。他们看起来像这样：
let count = 0;
$: doubled = count * 2;
完整代码：
<script>
let count = 0;
$: doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>如果这看起来有点陌生，请不要担心。它是 有效的（只不过没那么常见的）JavaScript，Svelte 能理解代码的意思：“只要任何引用的值发生更改，都要重新运行此代码”。一旦习惯了，你就再也回不了头了。
现在让我们在标记中再加一个doubled：
<script>
let count = 0;
$: doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>当然，您可以只在标记中编写{count * 2}，而不必使用响应式值。当您需要多次引用它们，或者您的值依赖于其他响应式的值时，响应式的值变得特别有用。
3、语句
我们不仅限于声明响应式的值，我们还可以响应式地运行任意语句。 例如，只要更改count的值，我们就可以在控制台输出它的值：
<script>
let count = 0;
$: doubled = count * 2;
// 只要更改count 的值，我们就可以在控制台输出它的值
$: console.log(`the count is ${count}`);
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>你可以轻松将一组语句放在一个块里：
$: {
console.log(`the count is ${count}`);
alert(`I SAID THE COUNT IS ${count}`);
}
你甚至可以将$:放在一个if语句之前：
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}4、更新数组和对象
Svelte 的响应性是由赋值触发的，因此使用诸如 push、splice 等数组方法不会引起自动更新。
正如下方示例，点击按钮后界面不会有任何变化：
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers.push(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>解决这个问题的其中一个办法是写一行多余的赋值给自身的表达式：
function addNumber() {
numbers.push(numbers.length + 1);
numbers = numbers;
}
但还有一个更常用的方案：
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}
你可以使用类似的办法来替代 pop、shift、unshift 和 splice。
此外，赋值给数组和对象的 属性，例如 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 obj = { a: { b: { c: 10 } } }
</script>
<button on:click={ () => obj.a.b.c = 20 }>update</button>
<p>c = {obj.a.b.c}</p>但是下方代码不会更新：
<script>
let obj = { a: { b: { c: 10 } } }
function handleClick() {
let b = obj.a.b
b.c = 20 // 不会触发更新
// 除非有一个赋值操作，尝试取消下面这行注释：
// obj = obj;
}
</script>
<button on:click={ handleClick }>update</button>
<p>c = {obj.a.b.c}</p>总结
赋值——是触发 Svelte 反应性的核心，Svelte 编译器根据赋值来确定是否需要更新相应的值。
除了常规的赋值语句外，$ 符号是另一种十分强大的反应性声明，它类似 Vue 的 computed 属性，不仅支持普通表达式，还可以是大括号括起的语句，甚至是 if 语句。
需要特别注意的是，数组的 push、pop、shift、unshift、splice 方式，不会触发反应性，可以通过两种方式来让 Svelte“认为”此处需要进行更新，第一种是使用数组的方法，然后使用看起来十分“呆板”的 numbers = numbers；第二种实际上也是赋值，不过它通过 ... 解构后重组了整个数组，然后赋值回了给 numbers 引用。
同样地，对象的子属性单独拿出来使用，也不会触发反应性。