Какие стили API доступны во Vue?

Коротко

Во Vue 3 официально поддерживаются два стиля описания компонентов: Options API и Composition API. Это не два фреймворка, а два синтаксиса над одной реактивной системой.

Options API раскладывает код по «корзинам»: data, computed, methods, watch, lifecycle-хуки, props, emits. Удобно новичкам и в маленьких компонентах: быстро видно, где состояние, а где методы.

Composition API (setup / <script setup>) группирует код по фичам: рядом ref/reactive, computed, watch, хелперы. Логику выносят в composables (useUser, useFetch) и переиспользуют между компонентами. Лучше стыкуется с TypeScript.

<!-- Options -->
<script>
export default {
  data() { return { count: 0 } },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    inc() { this.count++ }
  }
}
</script>

<!-- Composition -->
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
function inc() { count.value++ }
</script>

Можно смешивать в одном проекте и даже постепенно мигрировать. На собеседовании плюс: объяснить, зачем нужен ref vs reactive, и что <script setup> — сахар над setup(), а не отдельный runtime.