encyklopedia.space

Vue.js

Vue.js (często po prostu Vue) jest progresywnym frameworkiem JavaScript służącym do budowy interfejsów użytkownika oraz aplikacji typu Single‑Page Application (SPA). Projektowany jest w stylu Model‑View‑ViewModel (MVVM) i kładzie duży nacisk na deklaratywną reaktivność danych oraz komponentowość.

Historia

Vue został stworzony w 2014 roku przez programistę Evana You, który wcześniej pracował przy projekcie AngularJS w firmie Google. Projekt powstał początkowo jako wewnętrzne narzędzie do prototypowania interfejsów, a już w 2015 roku został udostępniony publicznie jako open source pod licencją MIT.

Od tego czasu Vue przeszedł kilka znaczących aktualizacji:

Główne cechy

  • Reaktywność – zmiany w stanie aplikacji są automatycznie propagowane do widoku dzięki systemowi reaktywności.
  • Komponentowość – aplikacje budowane są z małych, izolowanych komponentów, które można ponownie wykorzystywać.
  • Prosty szablon – Vue używa deklaratywnego szablonu opartego na HTML, uzupełnionego o dyrektywy (np. v-bind, v-if, v-for).
  • API opcjonalne – można korzystać z prostego Options API lub z bardziej zaawansowanego Composition API.
  • Ekosystem – oficjalne dodatki, takie jak Vue Router, Vuex (obecnie zastępowany przez Pinia), oraz Vue CLI ułatwiające rozwój.
  • Integracja z innymi technologiami – Vue współpracuje z TypeScript, Webpack, Vite, Node.js i innymi narzędziami buildowymi.

Architektura i model reaktywności

Vue opiera się na warstwie view (szablon), reactive data (stan) oraz computed properties (wartości wyliczane). W wersji 3.x reaktywność jest realizowana przy pomocy natywnego obiektu Proxy, co znacznie przyspiesza wykrywanie zmian.

Model danych jest zazwyczaj przechowywany w jednej centralnej strukturze (store), a komponenty subskrybują odpowiednie fragmenty stanu, dzięki czemu nie muszą ręcznie zarządzać przepływem danych.

Ekosystem

  • Vue CLI – narzędzie linii poleceń umożliwiające szybkie tworzenie projektów oraz konfigurację bundlera.
  • Vite – nowoczesny serwer deweloperski i bundler, zaprojektowany z myślą o Vue 3.
  • Vue Router – oficjalna biblioteka do zarządzania routingiem w aplikacjach SPA.
  • Pinia – lekki, typowany store będący następcą Vuex.
  • Vue Test Utils – zestaw narzędzi do testowania komponentów.
  • Vuetify, Quasar, Element – popularne biblioteki komponentów UI.

Porównanie z innymi frameworkami

W porównaniu do React oraz Angular, Vue wyróżnia się:

  • Łatwiejszą krzywą uczenia się – szablony są zbliżone do czystego HTML, a początkowa konfiguracja jest minimalna.
  • Lepszą integracją z istniejącymi projektami – można stopniowo wprowadzać Vue do części aplikacji bez pełnej przebudowy.
  • Wydajnością – dzięki wykorzystaniu Virtual DOM i optymalizacjom w wersji 3.x.

Wersje i wsparcie

Obecnie najnowszą stabilną wersją jest Vue.js 3.x. Projekt utrzymuje wersję LTS (Long‑Term Support) dla 2.x, zapewniającą wsparcie bezpieczeństwa do 2023 roku.

Przykładowy kod

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">Kliknij mnie</button>
    <p>Licznik: {{ counter }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  setup() {
    const message = ref('Witaj w Vue.js!');
    const counter = ref(0);
    const increment = () => { counter.value++; };
    return { message, counter, increment };
  },
};
</script>

<style scoped>
#app { font-family: Arial, sans-serif; text-align: center; }
button { margin-top: 10px; }
</style>

Zastosowania

Vue jest wykorzystywany w licznych projektach komercyjnych i open source, m.in. w:

Społeczność i zasoby edukacyjne

Vue posiada rozbudowaną społeczność:

Powiązane pojęcia

Warto zapoznać się także z innymi artykułami: