Як оголошувати props у setup?

VueJunior~1 хв читання

У setup() (або <script setup>) props оголошуються не так, як в Options API. У Vue 3 є два способи, і їх важливо розуміти на співбесіді.

1. Звичайний спосіб всередині setup()

У компоненті з setup() props приймаються як перший аргумент:

export default {
  props: {
    title: String,
    count: Number
  },

  setup(props) {
    console.log(props.title)
    console.log(props.count)

    return {}
  }
}

Особливості:

props - реактивний об'єкт, але НЕ reactive(): його не можна змінювати всередині компонента (readonly).
Можна використовувати як props.title, props.count.
Не можна деструктурувати напряму (реактивність втратиться!).

Не можна так (втрачається реактивність):

const { title } = props // реактивності більше немає

Потрібно використовувати toRefs:

import { toRefs } from 'vue'

setup(props) {
  const { title, count } = toRefs(props)

  return { title, count }
}

Тепер title.value реактивний.

2. Спосіб з `<script setup>` (рекомендований)

У <script setup> props оголошуються через defineProps():

vue

<script setup>
const props = defineProps({
  title: String,
  count: Number,
})
</script>

Використання:

vue

<template>
  <h1>{{ props.title }}</h1>
</template>

Можна одразу деструктурувати - але обережно:

vue

<script setup>
const { title, count } = defineProps({
  title: String,
  count: Number
})
</script>

У <script setup> деструктуризація зберігає реактивність, тому що компілятор Vue сам обгортає їх у toRefs.

Це офіційно підтримується.

Приклад повноцінного компонента

vue

<script setup>
import { computed } from 'vue'

const { price, quantity } = defineProps({
  price: Number,
  quantity: Number
})

const total = computed(() => price * quantity)
</script>

<template>
  <p>Сума: {{ total }}</p>
</template>

Резюме (ідеально для співбесіди)

Варіант 1: setup(props)

setup(props) {
  props.title
}

props доступні через перший аргумент
не можна деструктурувати без toRefs

Варіант 2: `<script setup>` + defineProps()

const props = defineProps({...})

автотипізація
можна деструктурувати (Vue зробить те саме, що toRefs)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.