Vue3 の Composition API と、Options API
Options API とは、Vue2までのコンポーネントの構造を示すようだ。
公式のドキュメントでは唐突に Options API
というフレーズが登場し、なんのことか分からず困惑したけれど、ネットの情報をいくつか読んでみると、Vue2までのコンポーネントの構造(というか定義方法?)の事を Options API
と読んでいると理解した。
Options API の例
export default { data() { return { value: 0 } }, methods: { showValue () { console.log(this.value); } } }
Composition API の例
import { defineComponent, ref } from 'vue' export default { setup() { let value = ref(0); let showValue = () => console.log(value); return { value, showValue } }, }
この程度の分量の実装だと、Composition API を使うメリットがいまいち分からない。コード量が増えてロジックが複雑になってきた場合のコードの見通しが良くなるのだろうか?