\n\n\n\n\n```\n\n`scoped` добавляет уникальные атрибуты, чтобы CSS не протекал наружу. Допустимы `lang=\"ts\"`, CSS-модули, `src` на внешние файлы, кастомные блоки под тулинг.\n\n## Зачем так\nКолокация UI + логика + стили упрощает ревью и навигацию. Компилятор шаблона ловит ошибки раньше runtime и включает оптимизации Vue 3 (static hoisting, patch flags). Без SFC можно писать `h()`/render вручную, но в прикладных проектах стандарт — `.vue`.\n\nНа собеседовании полезно отличить SFC от «просто HTML+JS»: это **compile-time** формат, а не то, что браузер читает напрямую.\n\n## Итог\n`.vue` — единица UI во Vue: шаблон, скрипт и стили в одном модуле после build-time обработки."}}}

Что такое single-file component (`.vue`)?

Vue · junior · сложность 2

Войти, чтобы отмечать

Начнём с основы

SFC (.vue) — один файл с блоками <template>, <script> (или <script setup>) и опционально <style>, которые сборщик (Vite/webpack + vue-loader/@vitejs/plugin-vue) компилирует в ES-модуль с render-функцией.

Структура

<script setup>
import { ref } from 'vue'
const n = ref(0)
</script>

<template>
  <button type="button" @click="n++">{{ n }}</button>
</template>

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

scoped добавляет уникальные атрибуты, чтобы CSS не протекал наружу. Допустимы lang="ts", CSS-модули, src на внешние файлы, кастомные блоки под тулинг.

Зачем так

Колокация UI + логика + стили упрощает ревью и навигацию. Компилятор шаблона ловит ошибки раньше runtime и включает оптимизации Vue 3 (static hoisting, patch flags). Без SFC можно писать h()/render вручную, но в прикладных проектах стандарт — .vue.

На собеседовании полезно отличить SFC от «просто HTML+JS»: это compile-time формат, а не то, что браузер читает напрямую.

Итог

.vue — единица UI во Vue: шаблон, скрипт и стили в одном модуле после build-time обработки.

Загрузка…