Dynamiczne komponenty w Vue 3: kompleksowy przewodnik od eksperta Vue.js

Ten artykuł pierwotnie napisał Daniel Kasperczyk w lipcu 2024 roku. Zaktualizowaliśmy go w październiku 2026, aby potwierdzić, że przykłady nadal odpowiadają aktualnej wersji Vue 3, czyli stabilnej linii 3.5.x, poprawiliśmy kilka szczegółów w kodzie oraz dodaliśmy podsumowanie, najważniejsze wnioski i FAQ. Spostrzeżenia autora pozostały bez zmian.

Dynamiczne komponenty w Vue 3 pozwalają renderować różne komponenty w tym samym miejscu szablonu przez powiązanie atrybutu is wbudowanego elementu <component> z komponentem, który ma być aktualnie wyświetlany. Framework Vue.js, często wybierany przez firmy, którym zależy na prostocie i elastyczności, oferuje wiele sposobów dynamicznego renderowania komponentów, a dynamiczne komponenty należą do najbardziej użytecznych. Zwiększają interaktywność i modułowość aplikacji internetowych, a zespołom ułatwiają przełączanie się między elementami w obrębie jednego szablonu, dzięki czemu baza kodu pozostaje uporządkowana i łatwiejsza w utrzymaniu.

Czym są dynamiczne komponenty w Vue 3?

Doświadczeni programiści Vue cenią prostą i intuicyjną składnię, która utrzymuje przejrzystość znaczników szablonu: jasno pokazuje, który komponent ma się wyświetlić i w jakich okolicznościach. Dynamiczne komponenty pomagają tworzyć responsywne i adaptacyjne interfejsy użytkownika, które dopasowują się do konkretnych potrzeb i kontekstu aplikacji. Szczególnie doceniamy tę funkcję w aplikacjach klasy enterprise.

Przejdźmy do praktycznych zastosowań i korzyści z używania dynamicznych komponentów w Vue 3. Pokażę, jak upraszczają złożoną logikę UI i poprawiają ogólną efektywność tworzenia oprogramowania.

Dynamiczne komponenty w Vue 3 rozwiązują problem przełączania komponentów podczas interakcji użytkownika, a jednocześnie zachowują czytelność kodu w warstwie prezentacji, czyli w znacznikach szablonu. To bardzo pożądany efekt, bo ułatwia innym zrozumienie pisanego przez nas kodu i, co najważniejsze, jego późniejsze utrzymanie.

Dzięki dynamicznym komponentom w Vue nie musimy rozbudowywać kodu o wiele struktur warunkowych, takich jak v-if, v-else i v-else-if. Zamiast powielać te same propsy lub emitowane akcje w wielu gałęziach warunkowych, możesz podejść do tego czyściej i wydajniej. Efekt to krótszy, bardziej przejrzysty kod, który usprawnia tworzenie oprogramowania i ułatwia utrzymanie.

Aby wyrenderować dynamiczny komponent w Vue, użyj prostej składni opartej na wbudowanym elemencie <component> i przekaż mu atrybut wskazujący, który element ma zostać wyrenderowany. Kluczowym atrybutem jest tutaj is. Zgodnie z dokumentacją Vue może on przyjmować nazwę zarejestrowanego komponentu, nazwę znacznika HTML albo samą definicję komponentu. W <script setup> przekazujesz zaimportowany komponent, czyli definicję, a nie string. Na przykład możesz powiązać :is="currentComponent", gdzie currentComponent to wartość reaktywna określająca, który komponent ma być wyświetlany w danym momencie.

<component :is="currentComponent" />

Jak przekazywać propsy i zdarzenia do dynamicznych komponentów w Vue 3?

Jeśli chcesz przekazać propsy albo zdarzenia do dynamicznego komponentu, zrobisz to tak samo jak w przypadku standardowych komponentów Vue:

<component :is="currentComponent" :value="value" @input="onInput" />
<!-- or -->
<component :is="currentComponent" v-model="value" />

Te dwie formy nie są zamienne. W przypadku <component> dyrektywa v-model rozwija się do propa modelValue i zdarzenia update:modelValue, więc działa z własnymi komponentami, ale nie zadziała, gdy iswskazuje na natywny element, taki jak input, select czy textarea. Dla elementów natywnych użyj jawnej pary :value i @input z pierwszej linijki.

Jak zachować stan komponentu podczas przełączania dynamicznych komponentów?

Gdy dynamiczny komponent się zmienia, poprzedni jest odmontowywany, co oznacza utratę wszystkich danych, które przechowywał przed zmianą. Nie zawsze tego oczekujemy, zwłaszcza w sytuacjach, gdy zachowanie stanu komponentu ma kluczowe znaczenie, na przykład w polach formularza, sesjach użytkownika albo innych elementach ze złożonym stanem wewnętrznym, który powinien przetrwać zmianę widoku.

Aby rozwiązać ten problem, zespół Vue przygotował na takie sytuacje wbudowany komponent <keep-alive> (<KeepAlive>). Opakowuje on dynamiczne komponenty i przechowuje ich instancje w pamięci podręcznej zamiast je niszczyć, dzięki czemu zachowuje ich stan. Gdy komponent opakowany w <keep-alive> przestaje być aktywny, znika z DOM-u, ale pozostaje w stanie dezaktywowanym zamiast zostać odmontowany, więc wraca dokładnie w takim stanie, w jakim użytkownik go zostawił.

<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

Domyślnie każdy komponent wewnątrz jest zapisywany w pamięci podręcznej. Jeśli przełączasz się między wieloma ciężkimi widokami, użyj propsów include/exclude, aby ograniczyć, które komponenty mają być cache'owane, oraz max, aby ustawić limit liczby przechowywanych instancji.

Jak stosować lazy loading dynamicznych komponentów w Vue 3?

Lazy loading to technika poprawy wydajności aplikacji Vue 3, która polega na ładowaniu dynamicznych komponentów dopiero wtedy, gdy są potrzebne. To podejście jest szczególnie korzystne w dużych aplikacjach, gdzie ładowanie wszystkich komponentów Vue z góry może wydłużać czas początkowego wczytywania i zwiększać zużycie zasobów. Dzięki lazy loadingowi dynamicznych komponentów masz pewność, że ładowane są tylko niezbędne części aplikacji, co przekłada się na krótszy czas ładowania i płynniejsze doświadczenie użytkownika.

W Vue 3 lazy loading komponentów jest prosty dzięki funkcji defineAsyncComponent. Pozwala ona definiować komponenty, które będą ładowane asynchronicznie tylko wtedy, gdy są potrzebne, co optymalizuje wydajność aplikacji i skraca początkowy czas ładowania.

<template>
  <button @click="componentToRender = 'welcome'">Welcome component</button>
  <button @click="componentToRender = 'hello'">Hello component</button>
  <component :is="currentComponent" />
</template>

<script setup lang="ts">
import { defineAsyncComponent, computed, ref } from 'vue'

const asyncComponents = {
  welcome: defineAsyncComponent(() => import('@/components/TheWelcome.vue')),
  hello: defineAsyncComponent(() => import('@/components/HelloWorld.vue'))
}

const componentToRender = ref<keyof typeof asyncComponents>('hello')

const currentComponent = computed(() => {
  return asyncComponents[componentToRender.value]
})
</script>

Przykład z życia: jak zbudować formularz wieloetapowy z użyciem dynamicznych komponentów w Vue 3?

Dynamiczne komponenty sprawdzają się w różnych scenariuszach, na przykład w formularzach wieloetapowych często spotykanych na platformach e-commerce. W takich formularzach użytkownicy muszą podać swoje dane, wybrać opcje dostawy i wskazać metodę płatności.

W tym przykładzie nie użyjemy wbudowanego komponentu <keep-alive>, ponieważ będziemy przekazywać dane do dynamicznego komponentu za pomocą atrybutów, ale skorzystamy z lazy loadingu, aby poprawić wydajność.

<template>
  <div>
    <component :is="currentStep"
               :data="formData"
               @next="nextStep"
               @prev="prevStep"
    />

    <div class="buttons">
      <button v-if="currentStepIndex !== 0" @click="prevStep">Previous</button>
      <button v-if="currentStepIndex !== steps.length - 1" @click="nextStep()">Next</button>
      <button v-else @click="submitForm">Submit</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent } from 'vue';

const steps = [
  defineAsyncComponent(() => import('./Step1.vue')),
  defineAsyncComponent(() => import('./Step2.vue')),
  defineAsyncComponent(() => import('./Step3.vue'))
];

const currentStepIndex = ref(0);
const formData = ref({});

const currentStep = computed(() => steps[currentStepIndex.value]);

const nextStep = (data) => {
  formData.value = { ...formData.value, ...data };
  currentStepIndex.value++;
};

const prevStep = () => {
  currentStepIndex.value--;
};

const submitForm = () => { /* ... */ };
</script>

Komponenty kroków są zdefiniowane raz, poza computed. Gdyby tworzyć je wewnątrz, przy każdej zmianie kroku powstawałaby nowa definicja komponentu, co zmusza Vue do traktowania każdego kroku jak zupełnie nowego komponentu.

Kiedy warto używać dynamicznych komponentów w Vue 3?

Zrozumienie dynamicznych komponentów w Vue 3 i umiejętne korzystanie z nich może znacząco usprawnić zarówno proces tworzenia oprogramowania, jak i doświadczenie użytkownika w aplikacji. Dzięki temu, że oferują prostszy sposób przełączania się między komponentami Vue i zarządzania stanem, pozwalają pisać kod, który łatwiej utrzymać, czytać i rozwijać. Wbudowany komponent <keep-alive> dodatkowo rozszerza te możliwości, zachowując stan komponentu podczas zmian i zapewniając użytkownikowi płynne, spójne doświadczenie. Niezależnie od tego, czy tworzysz formularze wieloetapowe, dynamiczne dashboardy czy interaktywne interfejsy użytkownika, dynamiczne komponenty dają ci mocny zestaw narzędzi do budowania responsywnych i adaptacyjnych aplikacji, które pozostają modułowe także wtedy, gdy rosną.

Jeśli planujesz aplikację we Vue i szukasz zespołu, który wdrażał takie wzorce produkcyjnie, sprawdź usługi tworzenia aplikacji Vue.js w Monterail i skontaktuj się z nami.