Що таке data() в Options API?

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

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

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

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

Premium

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