Pytania rekrutacyjne Vue z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

Vue · Junior

1. Czym jest Vue?

   Poprawna odpowiedź: Progresywnym frameworkiem JavaScript do budowania interfejsów, który można wdrażać stopniowo

   „Progresywny” oznacza, że można zacząć od ulepszenia jednej strony i dojść do pełnego SPA z routingiem (Vue Router), zarządzaniem stanem (Pinia) i SSR (Nuxt). Rdzeń biblioteki skupia się na warstwie widoku i reaktywności.

2. Jaki jest zalecany sposób utworzenia nowego projektu Vue?

   Poprawna odpowiedź: npm create vue@latest

   create-vue tworzy projekt oparty na Vite i opcjonalnie dodaje TypeScript, Vue Router, Pinia, Vitest, ESLint oraz testy end-to-end. Stary Vue CLI (oparty na webpacku) jest w trybie utrzymania.

3. Czym różni się Options API od Composition API?

   Poprawna odpowiedź: Options API grupuje kod według typu opcji (data, methods); Composition API - według funkcjonalności, przez importowane funkcje

   Oba są wspierane w Vue 3. Composition API (zwykle przez <script setup>) ułatwia ponowne użycie logiki przez composables i wnioskowanie typów TypeScript; Options API nadal sprawdza się w prostszych komponentach.

4. Co robi {{ message }} w szablonie Vue?

   Poprawna odpowiedź: Interpolacja tekstu: wyświetla wartość jako escapowany tekst i aktualizuje ją przy zmianie

   Składnia „wąsów” wyświetla zwykły tekst, więc jest chroniona przed XSS. Do wyświetlenia HTML potrzebny jest v-html, któremu nigdy nie wolno przekazywać niezaufanej treści.

Vue · Middle

1. Czym watchEffect różni się od watch?

   Poprawna odpowiedź: watchEffect uruchamia się od razu i śledzi wszystko, co czyta; watch jest leniwy, ma jawne źródła i daje starą oraz nową wartość

   watchEffect jest zwięzły, gdy efekt używa tego samego stanu, od którego zależy. watch daje precyzyjną kontrolę: wyzwalają go tylko wskazane źródła i może być immediate lub once.

2. Co robi { deep: true } w watcherze?

   Poprawna odpowiedź: Wywołuje callback przy zagnieżdżonych mutacjach wewnątrz obserwowanego obiektu, kosztem jego przechodzenia

   Bezpośrednie obserwowanie obiektu reactive jest domyślnie głębokie; obserwowanie gettera - nie. Głębokie obserwowanie dużych struktur jest kosztowne - w 3.5 można przekazać liczbę, by ograniczyć głębokość.

3. Kiedy shallowRef jest lepszy niż ref?

   Poprawna odpowiedź: Dla dużych niemutowalnych danych (np. dużych odpowiedzi API), gdzie aktualizacje powinna wywoływać tylko zamiana .value

   ref czyni zagnieżdżone obiekty głęboko reaktywnymi przez Proxy, co kosztuje czas przy ogromnych strukturach. shallowRef śledzi tylko zamianę .value; użyj triggerRef, jeśli mutujesz i musisz wymusić aktualizację.

4. Dlaczego mutowanie stanu w getterze computed to błąd?

   Poprawna odpowiedź: Gettery computed muszą być czyste; efekty uboczne czynią aktualizacje nieprzewidywalnymi i mogą powodować nieskończone pętle

   Vue może wywołać getter w dowolnym momencie (albo wcale, jeśli nikt go nie czyta). Do efektów ubocznych używaj watchera, a computed niech będzie czysto pochodny.

Vue · Senior

1. Jak Vue 3 śledzi zależności reaktywne?

   Poprawna odpowiedź: Pułapki Proxy get zapisują wykonujący się efekt jako subskrybenta (track); pułapki set powiadamiają subskrybentów (trigger)

   Efekty (funkcje renderujące, computed, watchery) rejestrują się podczas wykonania. Proxy wyłapują też dodawanie/usuwanie właściwości i zmiany indeksów tablic, czego nie potrafiły gettery/settery Vue 2.

2. Dlaczego reactive(obj) === obj jest fałszem i dlaczego to ważne?

   Poprawna odpowiedź: reactive zwraca Proxy; mutowanie oryginalnego obiektu omija śledzenie, więc UI się nie aktualizuje

   Zawsze pracuj z proxy. Ponowne wywołanie reactive na tym samym obiekcie zwraca ten sam proxy, a toRaw(proxy) oddaje oryginał, gdy potrzebny jest dostęp bez śledzenia.

3. Dlaczego 100 zmian stanu w jednym handlerze daje tylko jeden ponowny render?

   Poprawna odpowiedź: Aktualizacje komponentów trafiają do kolejki schedulera i są wykonywane raz w mikrozadaniu

   Każda mutacja wyzwala efekty, ale zadania renderowania są deduplikowane w kolejce. nextTick() zwraca promise tego opróżnienia kolejki.

4. Co się dzieje od Vue 3.4, gdy computed przelicza się do tej samej wartości?

   Poprawna odpowiedź: Zależne elementy nie są wyzwalane, bo wartości computed są porównywane przed powiadomieniem

   const isEven = computed(() => count.value % 2 === 0) nie uruchamia już dalszych efektów, gdy count zmienia się z 2 na 4. Zwracanie za każdym razem nowego obiektu nadal to niweczy.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.