Zenn
Open2

<script setup> のハマりポイント

TypeScript
Vue.js
Yuma ShiraishiYuma Shiraishi

<script setup> とは

<script setup> を使うことで、これが

<template>
  <div>hello! {{ name }}</div>
</template>

<script lang="ts">
import { defineComponent } from vue

export default defineComponent({
  setup() {
    const name = 'my name'
    return {
      name
    }
  }
})
</script>

こう書けます！

<template>
  <div>hello! {{ name }}</div>
</template>

<script setup lang="ts">
  const name = 'my name'
</script>

記述量を大幅に減らすことができました。
少し使ってみて分かったことを以下に書いていきます。

Yuma ShiraishiYuma Shiraishi

props を定義する

defineProps を使う

<template>
  <div>hello! {{ name }}</div>
</template>

<script setup lang="ts">
  defineProps({
    name: {
      type: String,
      required: true,
    }
  })
</script>

defineProps は import 不要！

公式ドキュメントには下記のように書かれています。

defineProps と defineEmits は、<script setup> 内でのみ使用可能なコンパイラマクロです。インポートする必要はなく、<script setup> が処理されるときにコンパイルされます。

通常の関数とは異なり、コンパイル時に変換されるものなので import は不要のようです。

直接 toRefs の引数には使えない！

<script> 内でリアクティブに props を利用しようと思い、こんな感じで書いてハマりました。

<template>
  <div>hello! {{ name }}</div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue' 
  const { name } = toRefs(defineProps({
    name: {
      type: String,
      required: true,
    }
  }))
</script>

ブラウザのコンソールに下記のようなエラーが出ます。

ReferenceError: defineProps is not defined

下記のように修正するとOKです。

<template>
  <div>hello! {{ name }}</div>
</template>

<script setup lang="ts">
  const props = defineProps({
    name: {
      type: String,
      required: true,
    }
  })

  const { name } = toRefs(props)
</script>