雑多なブログ

音楽や語学、プログラム関連の話題について書いています

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 を使うメリットがいまいち分からない。コード量が増えてロジックが複雑になってきた場合のコードの見通しが良くなるのだろうか?