Vue3のCompositionAPIの書き方を、もっと簡潔にしてみる[Vue.js]

Vue3のCompositionAPIの書き方を、もっと簡潔にしてみる[Vue.js]
この記事をシェアする:

今回は、前回の記事:
Vue3で、従来のdataの書き方をCompositionAPIの書き方に変えてみる
で出てきたコードを、
もっと簡潔に記述する方法について、手短に書いていきたいと思います。

まずは結論から。script に setup属性を持たせるだけ

前回の記事に掲載したVue3のCompositionAPIの記法のコードは、
21行あった元のコードから、実は、以下のように
たった10行に書き換えることができてしまいます。
方法も簡単で、scriptタグにsetup属性を持たせるだけです。
以下がそのコードになります。

[App.vue のscript部分(VueCLIでプロジェクト作成した際に生成される、デフォルトのApp.vueをベースに使用)]

<script setup>
import { reactive } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const mydata = reactive({
  show: true,
  Next: 'Vuetify 3 titan',
  LTS: 'Vuetify v2.7',
  Latest: 'Vuetify v2.6 Horizon'
})
</script>

元々のコード(前回の記事のコード)は以下です。

[前回の記事のコード。上記と同じ挙動をしますが、2倍以上長いですね]

<script>
import { reactive } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  setup() {
    const mydata = reactive({
      show: true,
      Next: 'Vuetify 3 titan',
      LTS: 'Vuetify v2.7',
      Latest: 'Vuetify v2.6 Horizon'
    })
    return {
      mydata
    }
  }
}
</script>

いかがでしょうか。
scriptタグにsetup属性を持たせるだけで、かなり簡潔に書けることがわかりますね。
もともと、Vue.jsの単一コンポーネント(.vue)は、
毎回毎回繰り返しで書く必要がある、
export default {…(中略)… 等の、
いわゆる「ボイラープレート」と呼ばれる記述がありました。

Vue3で単一コンポーネントを使用している場合、
このscriptタグにsetup属性を持たせる記法を使うことで、
かなりスマートに記述することができるようになっています。

単一コンポーネント内でCompositionAPIを使用している場合に活用できる記法

Vue.js公式サイトの、こちらの解説ページ に、上のセクションでご紹介したような
scriptタグにsetup属性を持たせる記法」についての説明があります。

この公式サイトの解説には、この記法についての説明文の中で

シングルファイルコンポーネント(SFC)内でCompositionAPIを使用するためのコンパイル時のシュガーシンタックスです

と言及されています。
それに続く説明文では

SFC(シングルファイルコンポーネント) と CompositionAPI の両方を使用している場合に推奨される構文です。

とあり、Vue3で単一コンポーネントを使用している場合に、公式に推奨されている記法になります。

Vue3で単一コンポーネントを使用、かつ CompositionAPI を採用している際には、
この記法を取り入れることで、メリットを享受できそうですね。

Vue.js公式サイトの該当ページ:
script setup | Vue.js

この記事のまとめ

今回は、前回の記事:
Vue3で、従来のdataの書き方をCompositionAPIの書き方に変えてみる
で出てきたコードを、
もっと簡潔に記述する方法について、書きました。

毎回毎回同じ文を書かなければならなかった
export default {…(中略)

から始まる記述(いわゆる「ボイラープレート」というやつです)を、
scriptタグにsetup属性を持たせるだけで簡略化できるので、
コード自体すっきりして、とてもありがたいですね。

他にも、Vue.js公式サイト内の解説ページには
この記法を使うメリットが複数公開されていますので、一読すると理解が深まることと思います。
script setup | Vue.js

当サイトではこれまで Vuetify 2.x 系統の記事が多めだったこともあり、
Vue2(OptionsAPI) での書き方の記事が多かったですが、
今後は Vue3(CompositionAPI) 系統の記事についても、少しずつ数を増やしていく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: