Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як оголошувати props у setup?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

---

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

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

```js
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`.
- Не можна деструктурувати напряму (реактивність втратиться!).

---

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

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

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

```js
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)

```js
setup(props) {
  props.title
}
```

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

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

```js
const props = defineProps({...})
```

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати313 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.