Vue.js: ghid pentru începători – componente, directive și reactivity

Vue.js a câștigat popularitate rapidă în ultimii ani, devenind unul dintre cele mai apreciate framework-uri JavaScript pentru construirea interfețelor web. Sintaxa sa intuitivă, curba de învățare accesibilă și ecosistemul bogat îl fac o alegere excelentă atât pentru începători cât și pentru dezvoltatori experimentați.

Acest ghid te introduce în conceptele fundamentale ale Vue.js.

Introducere în Vue.js: filozofie și avantaje

Vue.js este un framework JavaScript progresiv, ceea ce înseamnă că poate fi adoptat incremental. Poți începe prin a adăuga Vue pe o singură pagină a unui proiect existent și să extinzi utilizarea pe măsură ce câștigi experiență.

Această flexibilitate este unul dintre motivele pentru care Vue a câștigat rapid adoptare în comunitatea de dezvoltatori. Dacă vii din lumea React, vei găsi concepte familiare – pentru comparație, citește ghidul nostru despre React, componente, state și props.

Instalare și configurare inițială

Cel mai simplu mod de a începe cu Vue.js este prin Vue CLI sau Vite. Vite oferă un server de dezvoltare extrem de rapid și este opțiunea recomandată în 2026.

Rulând comanda npm create vue@latest, vei fi ghidat printr-un process interactiv care îți permite să configurezi proiectul cu TypeScript, Vue Router, Pinia și alte dependențe populare. Alternativ, poți include Vue direct printr-un tag script CDN pentru experimente rapide fără setup de build.

Pentru mai multe detalii despre instrumente de build moderne, consultă ghidul nostru despre JavaScript modern ES6.

Options API vs Composition API

Vue 3 introduce Composition API ca alternativă la Options API-ul clasic din Vue 2. Options API organizează codul în secțiuni predefinite: data, methods, computed, watch.

Composition API, prin funcția setup(), permite organizarea logicii după funcționalitate, nu după tipul opțiunii. Pentru proiecte noi și componente complexe, Composition API este recomandat.

Pentru migrarea proiectelor existente sau pentru echipe familiarizate cu Vue 2, Options API rămâne complet funcțional și suportat.

Componente în Vue.js

Componentele sunt blocurile fundamentale de construcție în Vue.js. Înțelegerea modului în care funcționează și cum comunică între ele este esențială pentru orice aplicație Vue.

Structura unei componente Vue

O componentă Vue tipică este definită într-un fișier cu extensia .vue, numit Single File Component (SFC). Acesta conține trei secțiuni: template (HTML-ul componentei), script (logica JavaScript) și style (stilurile CSS, opțional scoped).

Această separare clară face componentele ușor de înțeles și de menținut. Fiecare componentă poate fi reutilizată în orice parte a aplicației, promovând DRY (Don’t Repeat Yourself).

Buna organizare a componentelor este importantă și pentru performanța SEO a aplicațiilor – citește despre viteza de încărcare a site-ului.

Props și comunicarea între componente

Props sunt proprietăți prin care componenta părinte transmite date componentei copil. Se definesc în secțiunea props a componentei și pot fi tipizate, obligatorii sau cu valori implicite.

Comunicarea în sens invers (de la copil la părinte) se realizează prin events – componenta copil emite un eveniment, iar părintele îl ascultă. Vue 3 introduce și Provide/Inject pentru transmiterea datelor prin mai multe niveluri fără prop drilling.

Pentru starea globală complexă, Pinia (succesorul Vuex) este soluția recomandată.

Ciclul de viață al componentelor

Fiecare componentă Vue trece printr-un ciclu de viață bine definit: creare, montare, actualizare și dezmontare. Hooks-urile de lifecycle (onMounted, onUpdated, onBeforeUnmount etc.

în Composition API) îți permit să execuți cod în momentele cheie din viața componentei. onMounted este ideal pentru fetch-ul de date inițiale sau inițializarea bibliotecilor terțe. onBeforeUnmount este locul potrivit pentru curățarea listener-ilor și a intervalelor pentru a evita memory leaks.

Directive Vue.js esențiale

Directivele sunt atribute speciale care adaugă comportament reactiv elementelor HTML din template. Ele sunt prefixate cu v- și sunt una dintre caracteristicile distinctive ale Vue.

Directivele de bază: v-if, v-for, v-bind, v-on

v-if, v-else-if și v-else controlează afișarea condițională a elementelor. Spre deosebire de v-show (care folosește display:none), v-if elimină complet elementul din DOM când condiția este falsă. v-for iterează o listă și generează elemente repetate, necesitând întotdeauna atributul :key pentru o actualizare eficientă a DOM-ului. v-bind (prescurtat ca 🙂 leagă dinamic atributele HTML la valori din componenta Vue. v-on (prescurtat ca @) atașează handler-i de evenimente la elemente.

v-model și two-way binding

v-model este o directivă specială care implementează two-way data binding, sincronizând automat valoarea unui input cu o proprietate reactivă din componenta. Este echivalentul combinației :value + @input.

Vue 3 a extins v-model pentru a funcționa și pe componente custom, înlocuind sintaxa .sync din Vue 2. Această caracteristică simplifică considerabil lucrul cu formulare și inputs.

Directive personalizate

Poți crea directive personalizate pentru comportamente care nu sunt acoperite de directivele built-in. O directivă customizată primește element-ul DOM și poate manipula direct comportamentul sau stilul acestuia.

Directivele custom sunt utile pentru integrarea cu biblioteci JavaScript care necesită manipulare directă a DOM-ului, cum ar fi librării de animații sau instrumentele de tooltip.

Reactivity în Vue 3

Sistemul de reactivitate este motorul care face Vue să funcționeze. Vue 3 l-a rescris complet folosind ES6 Proxy, oferind mai multă flexibilitate și performanță față de Vue 2.

ref și reactive

În Composition API, ref() este folosit pentru valori primitive (string, number, boolean), iar reactive() pentru obiecte. Valoarea unui ref se accesează prin proprietatea .value în JavaScript, dar în template aceasta este dereferențiată automat. reactive() creează un obiect reactiv profund, dar nu poate fi reasignat (trebuie mutate proprietățile, nu obiectul în sine). computed() creează valori derivate care se recalculează automat când dependențele lor se schimbă.

Aceste concepte sunt similare cu cele din alte framework-uri moderne – poți face o paralelă citind despre Node.js pentru aplicații moderne.

Watch și watchEffect

watch() și watchEffect() permit executarea de efecte secundare când datele reactive se schimbă. watch() urmărește explicit una sau mai multe surse reactive și rulează callback-ul când acestea se modifică, oferind acces la valorile vechi și noi. watchEffect() rulează imediat și urmărește automat toate dependențele reactive accesate în callback. Alegerea dintre ele depinde de nevoile specifice: watch pentru reacții la schimbări specifice, watchEffect pentru sincronizare automată cu mai multe surse.

Vue.js oferă o cale accesibilă dar puternică de a construi interfețe web moderne. Conceptele prezentate în acest ghid reprezintă fundația pe care poți construi aplicații din ce în ce mai complexe.

Pasul următor natural este să explorezi Vue Router pentru navigare și Pinia pentru managementul stării globale, care completează ecosistemul Vue pentru aplicații de producție.