Вопрос с собеседования · Frontend

Как устроен компонент Vue?

JuniorАрхитектура фронтенда
Ещё спрашивают так:
  • Что такое Composition API?
  • Что такое однофайловый компонент?
Коротко

Компонент Vue обычно — однофайловый (.vue): блоки <script setup>, <template> и <style scoped>. Шаблон — HTML с директивами: {{ }} для вывода, v-bind (:href), v-on (@click), v-if/v-show, v-for с :key, v-model для форм. Логика в Composition API: ref, reactive, computed, watch, хуки жизненного цикла (onMounted). Экосистема: Vue Router, Pinia для состояния, Nuxt для SSR.

  • scoped-стили применяются только к компоненту
  • v-show скрывает через CSS, v-if не создаёт элемент
  • Options API — старый стиль, ещё встречается в проектах

Подробно

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template><button @click="count++">{{ count }}</button></template>

Что хотят услышать

  • Однофайловый компонент.
  • Директивы шаблона.
  • Composition API и экосистема.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓SFC: script setup, template и style; директивы v-if, v-for, v-model; логика — ref и computed
  • ✗Vue-компоненты пишут только на JSX без шаблонов
  • ✗v-if и v-show работают одинаково: оба просто скрывают элемент через CSS
  • ✗scoped-стили применяются ко всему приложению

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования