響應(yīng)
Svelte的核心是一個強(qiáng)大的響應(yīng)系統(tǒng)落萎，可以使DOM與應(yīng)用程序狀態(tài)保持同步ーー例如亥啦，響應(yīng)一個事件。
為了演示它练链，我們首先需要觸發(fā)一個事件的程序:
<button on:click={handleClick}>
在handleClick函數(shù)中翔脱，我們需要做的就是改變 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>
響應(yīng)聲明
當(dāng)組件的狀態(tài)發(fā)生變化時，Svelte會自動更新DOM媒鼓。通常届吁，組件狀態(tài)的某些部分需要從其他部分計算(例如從firstname和lastname派生的fullname) ，并在它們發(fā)生更改時重新計算绿鸣。
對于這些疚沐，我們這樣做聲明：
let count = 0;
$: doubled = count * 2;
不要擔(dān)心，這看起來雖然有點(diǎn)怪異潮模，但它是有效的JavaScript亮蛔，Svelte將其解釋為“當(dāng)任何引用的值發(fā)生變化時，運(yùn)行這段代碼”擎厢。一旦你習(xí)慣了究流，就回不去了。
讓我們在HTML中實(shí)現(xiàn)翻倍效果：
<p>{count} doubled is {doubled}</p>
當(dāng)然动遭，您可以只在HTML中編寫{count * 2} 芬探，而不必使用響應(yīng)。當(dāng)您需要多次引用響應(yīng)時厘惦，或者您的值依賴于其他響應(yīng)時偷仿，響應(yīng)就變得特別有價值。
完整代碼：
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
我們并不局限于響應(yīng)變量ーー我們也可以在響應(yīng)中運(yùn)行任意語句。例如炎疆，如果count的值發(fā)生變化卡骂，我們可以打印輸出：
$: 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>
更新數(shù)組和對象
因為Svelte的響應(yīng)是由賦值觸發(fā)的，所以使用像push和splice這樣的數(shù)組方法不會自動導(dǎo)致更新形入。
解決這個問題的一個方法是添加一段改變數(shù)組長度的代碼：
function addNumber() {
numbers.push(numbers.length + 1);
numbers = numbers;
}
但是還有一個更為簡潔的解決方案：
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}
您可以使用類似的模式來替換pop全跨、shift、unshift和concat亿遂。
對數(shù)組和對象屬性的賦值ーー例如obj.foo+=1或array[i]=x--與對值本身的賦值工作方式相同浓若。
function addNumber() {
numbers[numbers.length] = numbers.length + 1;
}
一個簡單的經(jīng)驗法則：更新后的變量的名稱必須出現(xiàn)在賦值的左側(cè)。比如這個：
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>
如果想親自演練以上的功能，可以穩(wěn)步到Sevlte官網(wǎng)教程中親自體驗：reactive
