Vue.js: вопросы на собеседовании

Вопросы и ответы по Vue.js: подготовка, примеры и типичные ошибки.

1. В чём разница между вычисляемыми свойствами (computed properties) и watch'ерами? Когда использовать каждый?
   Middle· спрашивают почти всегда
2. В чём разница между Options API и Composition API в Vue 3?
   Junior· спрашивают почти всегда
3. Что такое Pinia? Чем она отличается от Vuex и почему является рекомендованным менеджером состояния для Vue 3?
   Middle· спрашивают почти всегда
4. Как работает система реактивности Vue? Что изменилось между Vue 2 и Vue 3 (Proxy вместо Object.defineProperty)?
   Senior· спрашивают почти всегда
5. Что такое ref() и reactive() в Composition API? Когда использовать каждый?
   Junior· спрашивают почти всегда· полный разбор — Jobs/Boost
6. В каких типах frontend-проектов Vue.js даёт реальный выигрыш, а где будет избыточен или неудачен?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
7. Что такое composable'ы в Vue 3 и как они заменяют mixin'ы?
   Middle· полный разбор — Jobs/Boost
8. Что такое слоты (slots) во Vue? Объясните default slots, named slots и scoped slots.
   Junior· полный разбор — Jobs/Boost
9. Что такое defineProps и defineEmits в <script setup>?
   Middle· полный разбор — Jobs/Boost
10. Что такое lifecycle hooks во Vue? Перечислите их по порядку и опишите, когда каждый из них срабатывает.
    Junior· полный разбор — Jobs/Boost
11. Что такое provide и inject и как они соотносятся с Vuex/Pinia?
    Senior· полный разбор — Jobs/Boost
12. Что такое <script setup> и каковы его преимущества перед стандартным Composition API setup?
    Middle
13. Что такое Virtual DOM и как Vue использует его для эффективного рендеринга?
    Junior· полный разбор — Jobs/Boost
14. Что такое v-model и как он работает под капотом? Как использовать его с кастомными компонентами?
    Middle· полный разбор — Jobs/Boost
15. Каковы основные breaking changes при переходе с Vue 2 на Vue 3?
    Senior· полный разбор — Jobs/Boost
16. Как сравнить Vue.js с ближайшими альтернативами по DX, performance, SEO, accessibility, hiring и поддержке команды?
    Middle· полный разбор — Jobs/Boost
17. Как понять, что проблема в проекте связана с Vue.js, а не с API, сетью, дизайном состояния или плохой архитектурой?
    Senior
18. Представьте, приложение на Vue.js стало медленно открываться или часто перерисовываться. Как вы будете искать причину?
    Senior· полный разбор — Jobs/Boost
19. Какие архитектурные решения Vue.js навязывает вокруг rendering, state, routing, styling, data loading или deployment?
    Middle
20. Как оптимизировать производительность Vue-приложения (lazy loading, мемоизация и т.д.)?
    Senior· полный разбор — Jobs/Boost
21. Какие production-риски есть у Vue.js: hydration, bundle size, caching, accessibility, browser compatibility или observability?
    Senior· полный разбор — Jobs/Boost
22. Проект на Vue.js вырос из небольшого интерфейса в большой продукт. Какие архитектурные проблемы вы ожидаете увидеть?
    Senior· полный разбор — Jobs/Boost
23. Как работает Vue Router? В чём разница между режимом hash и режимом history?
    Middle· полный разбор — Jobs/Boost
24. Что такое watchEffect и watch? Чем они отличаются?
    Middle· полный разбор — Jobs/Boost
25. Что такое директивы Vue? Как создать кастомную директиву?
    Middle· полный разбор — Jobs/Boost
26. Как Vue обрабатывает асинхронные компоненты? Что такое defineAsyncComponent?
    Middle· полный разбор — Jobs/Boost
27. Что такое динамические компоненты и паттерн <component :is="">?
    Middle
28. Объясните обработку событий во Vue: $emit, кастомные события и модификаторы v-on.
    Junior· полный разбор — Jobs/Boost
29. Что такое <KeepAlive> и когда его стоит использовать?
    Middle· полный разбор — Jobs/Boost
30. Что такое компонент Suspense и как он работает с асинхронным setup?
    Middle· полный разбор — Jobs/Boost
31. Как тестировать Vue-компоненты? Какие инструменты использовать (Vitest, Vue Test Utils)?
    Middle· полный разбор — Jobs/Boost
32. Что такое toRef и toRefs? Когда они необходимы?
    Middle· полный разбор — Jobs/Boost
33. Расскажите о случае, когда вы улучшали performance, accessibility, testing или maintainability в проекте на Vue.js.
    Middle
34. Как отлаживать hydration mismatch в SSR-приложении на Vue?
    Middle· полный разбор — Jobs/Boost
35. Что такое navigation guard'ы в Vue Router и как их реализовать?
    Middle· полный разбор — Jobs/Boost
36. Что такое mixin'ы Vue? Каковы их недостатки по сравнению с composable'ами?
    Junior
37. Что такое компонент Teleport в Vue 3?
    Middle
38. В чём разница между v-if, v-else-if, v-else и v-show?
    Junior
39. Что такое Vite и почему он является стандартным инструментом сборки для проектов Vue 3?
    Senior