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

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

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

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

Контент

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

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

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

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

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

У **Options API** стан зберігається у спеціальній функції `data()`, яка повертає об'єкт з даними компонента.
Кожна властивість із `data()` стає **реактивним станом компонента**.

Простіше кажучи:

В Options API увесь стан зберігається всередині `data()`, і Vue робить його реактивним.

---

## Простий приклад

```javascript
<script>
export default {
  data() {
    return {
      count: 0,         // стан
      isOpen: false,    // стан
      message: "Привіт" // стан
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="count++">Clicked: {{ count }}</button>
  </div>
</template>
```

---

## Що важливо пам'ятати про `data()`:

#### 1. Має повертати об'єкт

Не можна повертати не-об'єкт.

Погано

```javascript
data: { count: 0 }
```

Добре

```javascript
data() {
  return { count: 0 }
}
```

---

#### 2. Кожен екземпляр компонента отримує **свою копію** стану

Якщо ти використовуєш компонент 10 разів - у кожного instance буде свій `count`.

---

#### 3. Vue робить властивості реактивними

Vue "обгортає" об'єкт із `data()` і стежить за змінами:

```javascript
this.count++  // → UI оновиться
```

---

#### 4. Всередині шаблону звертаємося через `{{ }}` або `this`

Можна писати:

```javascript
<p>{{ count }}</p>
```

І в методах:

```javascript
methods: {
  inc() {
    this.count++
  }
}
```

---

## Підсумок (коротко)

**В Options API стан зберігається у функції** `data()`**, яка повертає об'єкт з реактивними властивостями.**

- кожна властивість - локальний state компонента
- Vue відстежує зміни
- кожен компонент має свою копію цього стану

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

Для рев’юера

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

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