Developer

SFC и шаблонный синтаксис

↑ 4.1 Vue 3: основы, компоненты, Composition API · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Базовый вопрос по Vue: из чего состоит компонент и как работает шаблон.

Объяснение

SFC (Single File Component) — .vue файл с блоками <template>, <script>/<script setup>, <style>.

<script setup lang="ts">
import { ref, computed } from "vue";
const props = defineProps<{ title: string }>();
const count = ref(0);
const doubled = computed(() => count.value * 2);
const html = "<b>текст</b>";
</script>
 
<template>
  <section :class="{ active: count > 0 }" :style="{ color: 'red' }">
    <h2>{{ props.title }} — {{ count }} ({{ doubled }})</h2>
    <p v-html="html" />                       <!-- опасно: только доверенный HTML -->
    <button @click="count++">+1</button>
    <span>{{ count > 5 ? "много" : "мало" }}</span>
  </section>
</template>
 
<style scoped>
h2 { color: var(--primary); }
</style>

Шаблонный синтаксис:

КонструкцияНазначение
{{ expr }}интерполяция текста (экранируется)
:attr="expr" (v-bind)динамический атрибут/prop
@event="handler" (v-on)обработчик события
v-modelдвусторонняя привязка
#slot (v-slot)слоты
Выраженияодно JS-выражение без инструкций; доступ к ограниченному набору глобалей

Шаблон компилируется в render-функции (на этапе сборки), при этом статические части поднимаются и помечаются для оптимизации (patch flags, hoisting, block tree).

<style scoped> изолирует стили (атрибут data-v-*), <style module> — CSS Modules, v-bind() в CSS привязывает стили к состоянию.

Несколько корней у шаблона поддерживаются (Vue 3, fragments).

Нюансы и подводные камни

  • v-html с пользовательскими данными — XSS.
  • В шаблоне доступны только объявленные привязки <script setup> автоматически; в Options API — через this.
  • Сложную логику выносите из шаблона в computed/функции.
  • Вызов методов в шаблоне выполняется при каждом рендере — используйте computed для дорогих операций.
  • Регистр атрибутов в DOM-шаблонах (не SFC) нечувствителен.

Практика

  1. Создайте компонент с интерполяцией, привязками, обработчиками и scoped-стилями.
  2. Посмотрите скомпилированный render в Vue SFC Playground.
  3. Замените вызов метода в шаблоне на computed.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки