Vue3で、従来のdataの書き方をCompositionAPIの書き方に変えてみる[Vue.js]

Vue3で、従来のdataの書き方をCompositionAPIの書き方に変えてみる[Vue.js]
この記事をシェアする:
Vue2の書き方(OptionsAPI) から
Vue3の書き方(CompositionAPI) に移行する時、

Vue.js公式サイトの例を見るのが最も情報が正しいですし、良いと思います。

ただし、掲載されているサンプル自体が良い意味で洗練されているので、
初めは data の記述の仕方すら、戸惑うかもしれません。

ですので今回は
ものすごくシンプルな話ではあるのですが、
Vue.jsの単一コンポーネント(.vueファイル)における data の部分を
Vue2の書き方(OptionsAPI)から
→ Vue3の書き方(CompositionAPI)に
書き換えてみる方法
について、書いていきたいと思います。


なお、Vue3でも従来のOptionsAPIの記法はもちろん使用できるのですが、
将来的なことを考えると、CompositionAPI の書き方を知っておくことは
きっと役に立つことと思います。

この記事の続編の記事では、
Vue3のsetup属性を使うことで、この記事のコードをより簡潔に書ける方法をご紹介しています。そちらもあわせてご覧ください!

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

まずは結論から

早速、置き換えコードを見ていきたいと思います。
次のコードは
Vue.jsのプロジェクト を VueCLI で作成した時に最初に生成される、
デフォルトの App.vue のコードを元にして置き換えた例です。

[data部分を、Vue3のCompositionAPIの記法に置き換えたサンプル]

<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>

CompositionAPIの記法では、上記の10行目にあるように setup() の中に、
使用する data を定義していきます。dataの直前の
reactive()
が何かというと、これは Vue.js公式サイトの
このページ で解説されていることです。

reactive() を使用するには、
2行目にあるようにあらかじめ
import { reactive } from ‘vue’ として
インポートしておきます。

11〜16行目で定義したdataは、
17〜19行目にある return の中に記述しておくことで、
setup()の戻り値として
コンポーネント内でアクセスすることが可能になります。

上記は、従来の Vue2(OptionsAPI) の記法では、次のような記法だった部分です。

data: () => ({
  show: true,
  Next: 'Vuetify 3 titan',
  LTS: 'Vuetify v2.7',
  Latest: 'Vuetify v2.6 Horizon'
}),

次のセクションでは、定義したdataを
template内で単純に表示してみる、ということについて書いていきます。

定義したdataにアクセスして、template内に表示してみる例

上のセクションでは、
Vue3 の CompositionAPI の記法で data を定義してみました。
続いては、それをtemplate内で表示してみます。

単に表示してみるだけであれば、こちらは簡単で、
従来のように {{}} (マスタッシュ構文) を使ってシンプルに表示する事が可能です。

<template>
<p style="margin: 0 0 1rem;">
待望のVuetifyアップデート:<br />
{{mydata.Next}}
</p>
</template>

[表示結果]

待望のVuetifyアップデート:
Vuetify 3 titan

従来の書き方と異なるのは、 mydata.Next のように、
setup() の戻り値に記述した変数名.アクセスしたいdataのキー名
の形で data にアクセスすると言う点になります。

この記事のまとめ

今回は、いたってシンプルな例ながら

Vue2のOptionsAPI でのdata定義の書き方を、
Vue3のCompositionAPI の記法に書き換えてみる

と言うことについて書いてみました。

案件にもよるかとは思いますが、
Vue.jsを採用している今後の案件では、おそらく Vue3 の記法が一般的になってくることが予想されます。

なお冒頭にも書きましたが、Vue3でも、従来の OptionsAPI の記法は使用可能です。
ただし、ひとつのWeb制作案件・Webアプリ制作案件内で
OptionsAPI と CompositionAPI の併存、混在は現実的では無いと思われるため、
CompositionAPI の記法について知っておくことは、なにかと今後、役に立つことと思います。

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

この記事の続編の記事では、
Vue3のsetup属性を使うことで、この記事のコードをより簡潔に書ける方法をご紹介しています。そちらもあわせてご覧ください!

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

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

この記事をシェアする: