З чого складається однофайловий компонент Vue і що робить <script setup>?

Однофайловий компонент (SFC, файл .vue) об'єднує в одному файлі три частини:

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">Натиснуто {{ count }} разів</button>
</template>

<style scoped>
button { font-weight: 600; }
</style>

<script> - логіка компонента;
<template> - розмітка, яку компілятор перетворює на функцію рендеру;
<style> - стилі; з scoped вони діють лише на цей компонент.

Браузер не розуміє .vue-файлів - їх компілює збирач (Vite з плагіном @vitejs/plugin-vue).

<script setup> - скорочений запис Composition API. Без нього довелося б писати:

export default {
  setup() {
    const count = ref(0)
    return { count }   // усе, що потрібно шаблону, - вручну
  },
}

Що дає <script setup>:

усе оголошене на верхньому рівні доступне в шаблоні - змінні, функції, імпортовані компоненти. Не треба повертати об'єкт і реєструвати компоненти в components;
макроси компілятора defineProps, defineEmits, defineModel, defineExpose - їх не імпортують, компілятор замінює їх на опції компонента;
кращі типи: props і події описуються типами TypeScript;
продуктивніший код: шаблон компілюється в ту саму область видимості, що й скрипт, без проміжного проксі.

Що варто знати:

компонент з <script setup> за замовчуванням закритий: батьківський компонент через ref шаблону не бачить його внутрішніх змінних. Відкрити частину - defineExpose({ reset });
код <script setup> виконується для кожного екземпляра компонента, а звичайний <script> поруч - один раз при імпорті модуля (там зручно оголошувати типи й константи).

Докладніше в документації: script setup

З чого складається однофайловий компонент Vue і що робить <script setup>?

Перевір себе

Схожі питання