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

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

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

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

Контент

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

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

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

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

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

`data()` в Options API - це **функція**, яка повертає об'єкт з **локальним реактивним станом компонента**.
Усі властивості, які повертає `data()`, стають доступними в шаблоні і в `this` всередині методів, computed і watch.

`data()` **- місце, де в Options API зберігаються реактивні дані компонента.**

---

## Як виглядає `data()`?

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

Тепер:

- `count`
- `message`
- `isOpen`

- це **state** компонента.

---

## Чому це має бути функція?

Тому що кожен компонент повинен мати **свою власну копію стану**.

Якби `data` був об'єктом, то всі екземпляри компонента ділили б один і той самий стан (це погано).

Приклад:

Неправильно:

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

Правильно:

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

Кожен виклик `data()` -> нова копія об'єкта.

---

## Як Vue робить дані реактивними

Усі властивості з об'єкта, повернутого `data()`, Vue "обгортає" в реактивність.

Тобто такі вирази:

```javascript
this.count++
this.isOpen = true
```

автоматично викликають оновлення UI.

---

## Де використовуються дані з data()?

#### У шаблоні:

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

#### У методах:

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

#### У обчислюваних властивостях (computed):

```javascript
computed: {
  upper() {
    return this.message.toUpperCase()
  }
}
```

#### У watchers:

```javascript
watch: {
  count(newVal) {
    console.log('count changed:', newVal)
  }
}
```

---

## Приклад повного компонента з Options API

```javascript
<script>
export default {
  data() {
    return {
      count: 0,
      name: ''
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <div>
    <input v-model="name" placeholder="Введіть ім'я" />
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>
```

---

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

`data()` **- це функція, яка повертає об'єкт з реактивними даними компонента в Options API.**

- вона обов'язкова для локального стану
- повинна повертати об'єкт
- кожен компонент отримує власний екземпляр цього об'єкта
- будь-які зміни `this.someValue` викликають оновлення UI

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

Для рев’юера

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

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