svelte教程（2）反應性

Svelte的核心是功能強大的反應系統，用於使DOM與您的應用程序狀態保持同步-例如，響應事件。

<script>
    let count = 0;
    function handleClick() {
        count += 1;
    }
</script>
<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

聲明

當組件的狀態更改時，Svelte會自動更新DOM。通常，組件狀態的某些部分需要從其他部分計算並在它們發生任何變化時重新計算。使用$:聲明後只要任何引用的值發生更改，都要重新運行此代碼。
我們可以將他用作計算屬性。

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

除此之外，我們可以反應性的運行任意語句。

<script>
    let count = 0;
    $: doubled = count * 2;
    $: console.log(`the count is ${count}`)
    $: {
        console.log(`I SAID THE COUNT IS ${count}`);
    }
    $: if(count>=5){
        console.log(`count is dangerously high!`);
    }
    function handleClick() {
        count+=1;
    }
</script>
<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>

注意：svelte的反應性是由賦值觸發的，所以使用push、pop、splice、shift、unshift等數組操作不會導致更新。

<script>
  function add() {
    arr.push(arr[arr.length - 1] + 1);
  }
</script>
<button on:click={add}>add</button>
<p>The last one is {arr[arr.length - 1]}</p>

測試後發現並沒有觸發更新。
修改一下上面的add方法，如下：

<script>
  function add() {
    arr.push(arr[arr.length - 1] + 1);
    arr = arr;
  }
  // function add(){
  //     arr=[...arr,arr[arr.length-1]+1];
  // }
  // function add(){
  //     arr[arr.length]=arr[arr.length-1]+1;
  // }
</script>
<button on:click={add}>add</button>
<p>The last one is {arr[arr.length - 1]}</p>

本教程的所有代碼均上傳到github有需要的同學可以參考 https://github.com/sullay/svelte-learn。