今回は、前回の記事:
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) 系統の記事についても、少しずつ数を増やしていく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。