久しぶりにVueの勉強し始めたら、全然書き方が変わっていて戸惑いました。
Composition APIという記法（？）が追加されたようです。
Vue コンポーネントを作成する際は、Options API、そして Composition API と呼ばれる 2 種類の異なる API スタイルが利用できます。
以前までの書き方は Options APIという名前のよう。
今までの書き方：
<script>
export default {
// data() で返すプロパティはリアクティブな状態になり、
// `this` 経由でアクセスすることができます。
data() {
return {
count: 0
}
},
// メソッドの中身は、状態を変化させ、更新をトリガーさせる関数です。
// 各メソッドは、テンプレート内のイベントハンドラーにバインドすることができます。
methods: {
increment() {
this.count++
}
},
// ライフサイクルフックは、コンポーネントのライフサイクルの
// 特定のステージで呼び出されます。
// 以下の関数は、コンポーネントが「マウント」されたときに呼び出されます。
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
Composition APIの書き方：
<script setup>
import { ref, onMounted } from 'vue'
// リアクティブな状態
const count = ref(0)
// 状態を変更し、更新をトリガーする関数。
function increment() {
count.value++
}
// ライフサイクルフック
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
前回は、「data()で返すプロパティがリアクティブになる」だったのに、
今回は、リアクティブな状態にするには、refを使って定義するようになるらしい。
const count = ref(0)
また、<script setup> を使わないでも、
setup()を用いて、以下のようにも書ける。
setup()を用いた書き方：
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
// テンプレートや他の Options API フックを公開します
return {
count
}
},
mounted() {
console.log(this.count) // 0
}
}
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
リアクティブなプロパティcountは、setup()の中で定義して、returnで返さないといけない。
今までのOptions APIのときは、computedやmountedとかわざわざ、importする必要なかったのに、Composition API になると、わざわざimportしないといけなくなったのが面倒くさいと感じる。
まだちょっとメリットが良くわかっていませんが、
学習が目的の場合は、自分で理解しやすいと思うスタイルをお選びください。繰り返しますが、中核的な概念の多くは、どちらのスタイルでも共通です。もう一方のスタイルも、好きなときに後から習得することができます。
学習は、どっちでもできるらしい。
プロダクション用途の場合は、以下をおすすめします:
ビルドツールを利用しない予定の場合や、プログレッシブエンハンスメントなどの複雑性の低いシナリオで主に > Vue を使う予定の場合は、Options API を選択します。
アプリケーション全体を Vue で構築する予定の場合は、Composition API と単一ファイルコンポーネントの組み合わせを使用します。
アプリケーション全体を Vue で構築する場合は、Composition がおすすめ？そうでなければ、Optionsがおすすめってことかな？