📢
簡単なOptionsAPIとCompositionAPIの比較（状態データ編）
状態データについて
OptionsAPI
- data オプションにて状態データを管理します。
- data オプションは、以下役割を一度に行ないます。
- コンポーネントに状態データを登録
- Vue.js のリアクティブシステムに登録
- 例
<script>
export default {
data() {
return { count: 0 };
},
};
</script>
皆さんが普段見ているデータの宣言方法ですね。
CompositionAPI
- 振る舞いを setup 関数を使って定義するという考え方です。
- setup 関数の状態データは、データのリアクティブを行なわないため、明示的にリアクティブ化を行なう必要があります。
- 例
<script>
import { ref } from "vue";
export default {
setup() {
const count = ref(0); // リアクティブシステムに登録
return {
count, // コンポーネントに状態データを登録
};
},
};
</script>
コンポーネントの派生データ(算出)について
OptionsAPI
- computed オプションにて算出プロパティを管理します。
- computed からリアクティブなデータに依存させることで、再計算を行なっています。
- 例
<template>
<span>{{ message }}</span>
<br />
<button @click="count++">Click me</button>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
computed: {
message() {
return `Clicked ${this.count} times!`;
},
},
};
</script>
実際に動かしたい場合は
にてさわってみてください。
dataの値を変えるとそれに紐づいて表示メッセージが変わります。
CompositionAPI
- computed 関数を使用します。
- computed 関数は、第一引数に派生データを算出するための関数をとる高階関数です。
- データに変更が行なわれた差にリアクティブシステムで算出を行ないます。
- なお、data と同様 return にて値をコンポーネントに登録します。
- 例
<template>
<span>{{ message }}</span>
<br />
<button @click="count++">Click me</button>
</template>
<script>
export default {
setup() {
const count = ref(0);
const message = computed(() => `Clicked ${count.value} times!`);
return {
count,
message,
};
},
};
</script>
こちらも実際に動かしたい場合は
を参照してください。
CompositionAPI における注意点
this を使用しなくなる。
OptionsAPI では、script 内でコンポーネントに登録されたデータをthis.countとして取得します。
一方、CompositionAPI ではcount.valueとしてデータを取得します。
template 内は今まで通り、countのみで利用できます。
Discussion