はじめに
Vue.jsを始めていろいろ検索していたところ、setupの書き方が2種類あって、違いが気になったので調べてみた。
共通点
- どちらも、Vue 3で導入されたComposition APIで用いられる
-
コンポーネントのセットアップを定義するために使われる
- リアクティブなデータ、プロパティ、メソッドを定義できる
相違点
<script> setup(){}
概要
- Vue3.0から利用可能
- 古い書き方
例
<script>
export default {
setup() {
let message = 'Hello, Vue!'
const increment = () => { message += '!' }
return { message, increment }
}
}
</script>
<script setup>
概要
- Vue3.2から導入された新しい書き方
- セットアップの中身を
<script setup>直下に書けるので、より簡潔になる
例
<script setup>
let message = 'Hello, Vue!'
const increment = () => { message += '!' }
</script>
結論
機能的な違いはほぼないっぽいので、バージョンが3.2以上なら新しくて書きやすい<script setup>を使う方が良い。