Svelte公式チュートリアルでvue.jsとの類似点のまとめ２つ目です。
前回のはこちらから
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も更新します。