【Vue】<script setup>をサクッと使ってみる

<script setup>とは

Vue v3.2から使えるようになった構文です。
ポイントは以下の通り。

• SFC(Single File Component)で使える
• 通常の<script>よりも少ない記述で済む

書き方

従来の書き方

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup(){
    console.log('hello');
  }
})
</script>

script setupを用いた書き方

<script setup>
  console.log('hello');
</script>

なんとこれまたスッキリ。
defineComponentを読み込むことすら不要で、全体的な記述量が減ったのがわかると思います。

応用

これだけガッツリ記述を省略できるわけですが、「emitsやpropsはどこに書くの？」という疑問もあると思います。

<script setup>
const props = defineProps({
  name: String
})
const emit = defineEmits(['onChange']);
</script>

これに関しては、definePorpsとdefineEmitsを使用すればOK。
definePorpsとdefineEmitsはdefineComponentと同様に、わざわざimportする必要はなく、script setup内ではデフォルトで使えるようになっています。