【Svelte】Svelte公式チュートリアルでvue.jsとの類似点のまとめ(2.Reactivity) 


Svelte公式チュートリアルでvue.jsとの類似点のまとめ２つ目です。
前回のはこちらから

https://qiita.com/hiroyukiwk/items/df6d03e635a5a77c0f20

# Reactivity
クリックすると数字が変わる書き方です。
vueはmethodを追加して書かなければいけなかったのが、svelteではfunctionだけで処理できます。

## Assigments

```App.svelte
<script>
	let count = 0;

	function incrementCount() {
		count += 1;
	}
</script>

<button on:click={incrementCount}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
```

```App.vue
<template>
  <button v-on:click="incrementCount">
    Clicked {{count}} {{count === 1 ? 'time' : 'times'}}
  </button>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount: function () {
      this.count += 1;
    }
  }
};
</script>
```

## Declarations
svelteは`$:`で計算式をかきvueは`computed`で書きます。

```App.svelte
<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
	$: doubled = count * 2;
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>
```

```App.vue
<template>
  <div>
    <button v-on:click="incrementCount">
      Clicked {{count}} {{count === 1 ? 'time' : 'times'}}
    </button>
    <p>{{count}} doubled is {{doubled}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount: function () {
      this.count += 1;
    }
  },
  computed: {
    doubled: function () {
      return this.count * 2
    }
  }
};
</script>
```

## Statement
> リアクティブな 値 を宣言するだけでなく、任意の ステートメント をリアクティブに実行することもできます。
と書いてますが、svelteでは`$:`で処理ができます。
vueは`methods`の中で処理します。

```App.svelte
<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
	$: console.log(`the count is ${count}`);
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
```

```App.vue
<template>
  <div>
    <button v-on:click="handleClick">
      Clicked {{count}} {{count === 1 ? 'time' : 'times'}}
    </button>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick: function () {
      this.count += 1;
      console.log(`the count is ${this.count}`)
    }
  }
};
</script>
```

## Updating arrays and objects
>Svelte のリアクティビティは代入によってトリガーされるので、push や splice のような配列メソッドを使っても自動的には更新されません。例えば、ボタンをクリックしても何もしません。
vueでは`push`や`splice`など配列の処理をそのまま書けるのですが、
svelteでは配列をスプレッド構文でまとめるなどして代入していきます。

``` App.svelte
<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>
```

```App.vue
<template>
  <div>
    <p>{{numbers.join(' + ')}} = {{sum}}</p>
    <button v-on:click="addNumber">
      Add a number
    </button>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [
        1,
        2,
        3,
        4
      ],
    };
  },
  methods: {
    addNumber: function () {
      this.numbers.push(this.numbers.length + 1);
    },
  },
  computed: {
    sum: function () {
      return this.numbers.reduce((t, n) => t + n, 0);
    }
  }
};
</script>
```

以上がチュートリアルの２でした。

そのうち3も更新します。