Чи можна використовувати Composition API разом з Options API?

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

Так, Composition API можна використовувати разом з Options API - і це повністю підтримується Vue 3. Це називається змішаний підхід (hybrid approach).

Vue 3 дозволяє використовувати:

опції (data, methods, computed, mounted тощо)
і одночасно функції Composition API (setup, ref, reactive, onMounted тощо)

в одному й тому самому компоненті.

Як це виглядає?

vue

<script>
import { ref, onMounted } from 'vue'

export default {
  data() {
    return {
      title: 'Options API'
    }
  },

  setup() {
    const count = ref(0)

    onMounted(() => {
      console.log("mounted з Composition API")
    })

    return { count }
  },

  mounted() {
    console.log("mounted з Options API")
  }
}
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Лічильник: {{ count }}</p>
</template>

Працює без проблем.

Важливі особливості змішаного підходу

1. `setup()` виконується раніше, ніж хуки Options API

Порядок ініціалізації:

setup()
beforeCreate (з Options API)
created
beforeMount
mounted

2. Змінні з `setup` доступні в шаблоні

Через return:

setup() {
  const message = ref('Hello')
  return { message }
}

3. Всередині Options API не можна звертатися до змінних з setup через this

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

mounted() {
  console.log(this.count) // undefined
}

Це очікувано - Composition API не прив'язаний до this.

Але змінна доступна в шаблоні і з setup.

4. Можна використовувати watch/computed в обох API

Обидва варіанти працюють:

computed: {
  fullName() { ... }
}

const computedName = computed(() => ... )

5. Використовувати змішаний підхід варто помірно

Хоча це і можливо, команда Vue рекомендує:

для простих компонентів → Options API
для складної логіки → Composition API
не змішувати два API безсистемно

Використовувати змішаний підхід корисно під час міграції з Vue 2 на Vue 3.

Підсумок (ідеально для співбесіди)

Так, Composition API можна використовувати разом з Options API. Vue 3 повністю підтримує змішаний підхід. setup() виконується першим, його змінні доступні в шаблоні, але не через this. Такий підхід часто використовують під час міграції з Vue 2 або в компонентах, де потрібно поступово перейти до Composition API.

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

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

Premium

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