Question 1

Jaka jest główna różnica między var a let w JavaScript?

Accepted Answer

Zasadnicza różnica tkwi w scope zmiennych. let ma block scope, co oznacza, że zmienna zadeklarowana z let istnieje tylko w bloku, w którym jest zdefiniowana (między nawiasami klamrowymi). var ma function scope, co może powodować nieoczekiwane zachowania, ponieważ zmienna jest dostępna poza blokiem. Ta różnica w scope sprawia, że let jest zalecanym wyborem, aby unikać błędów związanych z hoistingiem i scope.

Question 2

Czym jest Promise w JavaScript?

Accepted Answer

Promise to obiekt reprezentujący ostateczne zakończenie lub niepowodzenie operacji asynchronicznej. Pozwala obsługiwać operacje, które zajmują czas (żądania HTTP, odczyty plików), bez blokowania wykonywania kodu. Promise może mieć trzy stany: pending (oczekujący), fulfilled (pomyślnie rozwiązany) lub rejected (zakończony błędem).

Question 3

Czym jest instancja Vue?

Accepted Answer

Instancja Vue to obiekt utworzony przez wywołanie createApp(), który reprezentuje aplikację. Ten obiekt główny zawiera wszystkie reaktywne dane, metody i opcje konfiguracji. Służy jako punkt wejścia do montowania aplikacji w elemencie DOM oraz inicjalizacji systemu reaktywności Vue.

Question 4

Czym jest komponent Vue?

Accepted Answer

Komponent Vue to wielokrotnego użytku instancja Vue z nazwą. Enkapsuluje HTML, CSS i JavaScript w niezależnej jednostce logicznej. Komponenty pozwalają dzielić interfejs użytkownika na wielokrotnego użytku i łatwe w utrzymaniu fragmenty. Każdy komponent ma własny template, logikę i style, co ułatwia organizację kodu i ponowne wykorzystanie.

Question 5

Jaka jest minimalna wymagana struktura dla aplikacji Nuxt 3?

Accepted Answer

Aplikacja Nuxt 3 wymaga jedynie pliku app.vue lub katalogu pages/ w katalogu głównym projektu. Jeśli app.vue istnieje bez folderu pages/, Nuxt tworzy aplikację bez Vue Router. Jeśli pages/ istnieje, Nuxt automatycznie włącza file-based routing i wymaga <NuxtPage /> w app.vue, aby wyświetlać trasy.

Question 6

Jaka jest główna różnica między useFetch a useAsyncData w Nuxt?

Accepted Answer

useFetch to wrapper wokół useAsyncData i $fetch, który upraszcza typowe wywołania API. Automatycznie obsługuje budowanie URL i przyjmuje URL bezpośrednio jako pierwszy argument, podczas gdy useAsyncData wymaga unikalnego klucza i własnej funkcji fetcher. Używaj useFetch do prostych wywołań API, a useAsyncData do złożonej logiki fetchingu.

Question 7

Czym jest Server-Side Rendering (SSR) w Nuxt?

Accepted Answer

SSR generuje kompletny kod HTML na serwerze przy każdym żądaniu, a następnie wysyła go do klienta. Poprawia to SEO, ponieważ wyszukiwarki otrzymują natychmiast dostępną treść HTML, a także skraca czas do pierwszego renderowania (first paint). SSR jest domyślnym trybem renderowania w Nuxt 3, w przeciwieństwie do renderowania po stronie klienta, gdzie JavaScript generuje treść w przeglądarce.

Question 8

Czym jest Virtual DOM w Vue?

Accepted Answer

Virtual DOM to lekka reprezentacja JavaScript rzeczywistego drzewa DOM. Vue używa Virtual DOM, aby zminimalizować bezpośrednie manipulacje DOM, które są kosztowne pod względem wydajności. Gdy zmienia się stan, Vue tworzy nowy Virtual DOM, porównuje go ze starym (algorytm diffing), a następnie stosuje do rzeczywistego DOM tylko niezbędne zmiany. To podejście znacznie zmniejsza liczbę operacji DOM i poprawia wydajność, zwłaszcza w przypadku złożonych aplikacji z wieloma aktualizacjami.

Question 9

Jaki jest główny cel provide/inject w Vue 3?

Accepted Answer

Provide/inject pozwala przekazywać dane z komponentu nadrzędnego do dowolnego komponentu potomnego bez przekazywania props przez każdy poziom pośredni. Pozwala to uniknąć 'props drilling', gdzie props muszą być przekazywane przez wiele poziomów komponentów, które ich nie potrzebują. Jest to szczególnie przydatne do udostępniania danych globalnych, takich jak konfiguracja motywu lub stan uwierzytelnienia.

Question 10

Jaka jest główna rola defineComponent w Vue 3 z TypeScript?

Accepted Answer

defineComponent włącza type inference TypeScript dla opcji komponentu. Bez tej funkcji kontekst this byłby traktowany jako any w Options API. Zapewnia, że props, data, computed i metody są automatycznie poprawnie typowane.

Pytania z rozmów o Vue.js / Nuxt.js

Gotowy na rozmowę o Vue.js / Nuxt.js?

Odkryj wszystkie tematy Vue.js / Nuxt.js

Podstawy JavaScript

Nowoczesny JavaScript (ES6+)

Podstawy Vue

Komponenty Vue

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Reaktywność Vue

Podstawy Nuxt

Pobieranie danych w Nuxt

SSR i SSG w Nuxt

Trasy serwerowe Nuxt

Moduły Nuxt

Composables we Vue

Formularze i walidacja Vue

Zarządzanie stanem w Nuxt

Testowanie Vue

Wdrażanie Nuxt i CI/CD

Wydajność Vue

Zaawansowane wzorce Vue

TypeScript z Vue

Uwierzytelnianie Nuxt

SEO z Nuxt

Internacjonalizacja w Nuxt

Architektura Vue

Bezpieczeństwo Nuxt

Ekosystem Vue

Migracja Vue 2→3 i Nuxt 2→3

Opanuj Vue.js / Nuxt.js na następną rozmowę