响应
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