Skip to main content

Де зберігається стан в Options API?

VueJunior~1 хв читання
Запропонувати правку

У 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 відстежує зміни
  • кожен компонент має свою копію цього стану

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

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

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

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