<script setup> は、スクリプトブロックのトップレベルでコードを記述することで、より簡潔で効率的なコンポーネント定義を可能にします。これにより、デフォルトでローカルスコープを持ち、明示的にエクスポートする必要がなくなります。
記事の目次
- 具体例（サンプルコード）
-
<script setup>を使わなかった場合のサンプルコード -
<script setup>の特徴 -
<script setup>の便利さ -
<script setup>の詳細なドキュメンテーション
具体例（サンプルコード）
まず、<script setup>を使った具体例を示します。この例では、リアクティブなデータとメソッドを定義し、それをテンプレートで使用しています。
<template>
<div>
<p>カウント: {{ count }}</p>
<button @click="increment">増やす</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
</script>
<style scoped>
button {
font-size: 16px;
}
</style>
<script setup>を使わなかった場合のサンプルコード
次に、<script setup>を使わなかった場合の同じ機能を持つサンプルコードを示します。export defaultやsetup()が使用されていることが大きな差異です。
<template>
<div>
<p>カウント: {{ count }}</p>
<button @click="increment">増やす</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
return { count, increment }
}
}
</script>
<style scoped>
button {
font-size: 16px;
}
</style>
<script setup>の特徴
<script setup>の主な特徴を以下にまとめます。
- 簡潔な構文: setup関数やexport default構文を省略でき、よりシンプルに記述できます。
- トップレベルでの宣言: setup関数内で行うデータやメソッドの定義をトップレベルで記述でき、見通しが良くなります。
- インポートの最適化: インポートされたモジュールは自動的にsetup関数内で利用可能になり、明示的に引数として渡す必要がありません。
インポートの最適化の具体例
通常の<script>タグの場合
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
// refをここで使用
return { count }
}
}
<script setup>の場合
import { ref } from 'vue'
// refをトップレベルで直接使用
const count = ref(0)
このように、<script setup>を使用することで、インポートされたモジュールをより直感的に、そしてシンプルに扱うことができます。
<script setup>の便利さ
<script setup>を使うことで得られる主な利点を以下に示します。
- コードのシンプル化: 定型的なボイラープレートコードを省略でき、コードがシンプルになります。
- パフォーマンスの向上: setup関数の実行時に一度だけ呼び出されるコードがトップレベルに記述されるため、パフォーマンスが向上します。
- 型推論の強化: TypeScriptとの統合が容易になり、型推論がより強力になります。
- 直感的な記述: コンポーネントのロジックをトップレベルで直接記述できるため、より直感的にコードを書くことができます。
<script setup>の詳細なドキュメンテーション
<script setup>の詳細については、以下の公式ドキュメンテーションを参照してください。
Vue 3 Documentation on <script setup>: https://vuejs.org/api/sfc-script-setup.html