# Просунуті патерни Vue (Vue.js / Nuxt.js)

> Provide/inject, custom directives, render functions, JSX, teleport, suspense, async components

- 24 питань зі співбесід
- Senior
- [Питання зі співбесід: Vue.js / Nuxt.js](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy.md)

## 1. Яка основна мета provide/inject у Vue 3?

**Відповідь**

Provide/inject дозволяє передавати дані від батьківського компонента до будь-якого нащадкового компонента без передавання props через кожен проміжний рівень. Це дозволяє уникнути 'props drilling', коли props доводиться передавати через кілька рівнів компонентів, які їх не потребують. Особливо корисно для спільного використання глобальних даних, як-от конфігурація теми чи стан автентифікації.

## 2. Як оголосити значення за допомогою provide у компоненті, що використовує Composition API?

**Відповідь**

У Composition API використовується функція provide з двома аргументами: ключем (string або Symbol) і значенням, яке потрібно надати. Наприклад, усередині setup. Це значення буде доступне нащадковим компонентам через inject. Використання Symbol як ключів гарантує унікальність та запобігає колізіям імен.

## 3. Яка основна функція директиви Teleport у Vue 3?

**Відповідь**

Teleport дозволяє рендерити вміст компонента в іншому DOM-вузлі, ніж його позиція в дереві компонентів Vue. Зазвичай використовується для модальних вікон, підказок і сповіщень, які потрібно рендерити в корені документа, щоб уникнути проблем із z-index та CSS-позиціюванням. Компонент зберігає свій контекст Vue і може отримувати доступ до даних батьківського компонента.

## Ще 21 доступних питань

- Який атрибут є обов'язковим для використання Teleport у Vue 3?
- Що таке custom directive у Vue?

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

## Інші теми співбесід Vue.js / Nuxt.js

- [Основи JavaScript](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/javascript-fundamentals.md): 20 запитань, Junior
- [Сучасний JavaScript (ES6+)](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/es6-modern-javascript.md): 20 запитань, Junior
- [Основи Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-basics.md): 22 запитань, Junior
- [Компоненти Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-components.md): 20 запитань, Junior
- [Vue Router](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-router.md): 18 запитань, Junior
- [Pinia State Management](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/pinia-state-management.md): 20 запитань, Junior
- [Vuex (Legacy)](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vuex-legacy.md): 15 запитань, Mid-Level
- [Composition API](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/composition-api.md): 24 запитань, Mid-Level
- [Реактивність Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-reactivity.md): 20 запитань, Mid-Level
- [Основи Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-fundamentals.md): 22 запитань, Mid-Level
- [Отримання даних у Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-data-fetching.md): 20 запитань, Mid-Level
- [SSR і SSG у Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-ssr-ssg.md): 22 запитань, Mid-Level
- [Серверні маршрути Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-server-routes.md): 20 запитань, Mid-Level
- [Модулі Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-modules.md): 18 запитань, Mid-Level
- [Composables у Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-composables.md): 20 запитань, Mid-Level
- [Форми та валідація Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-forms-validation.md): 20 запитань, Mid-Level
- [Керування станом у Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-state-management.md): 18 запитань, Mid-Level
- [Тестування Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-testing.md): 20 запитань, Mid-Level
- [Розгортання Nuxt та CI/CD](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-deployment-cicd.md): 22 запитань, Mid-Level
- [Продуктивність Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-performance.md): 22 запитань, Senior
- [TypeScript із Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/typescript-vue.md): 22 запитань, Senior
- [Автентифікація Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-auth.md): 20 запитань, Senior
- [SEO з Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-seo.md): 20 запитань, Senior
- [Інтернаціоналізація Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-i18n.md): 18 запитань, Senior
- [Архітектура Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-architecture.md): 22 запитань, Senior
- [Безпека Nuxt](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/nuxt-security.md): 20 запитань, Senior
- [Екосистема Vue](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-ecosystem.md): 18 запитань, Senior
- [Міграція Vue 2→3 та Nuxt 2→3](https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/migration-vue2-vue3-nuxt2-nuxt3.md): 22 запитань, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/technologies/vue-nuxt/pytannia-spivbesidy/vue-advanced-patterns