Vue.js, creat de Evan You, este unul dintre cele mai iubite și elegante framework-uri JavaScript progresive pentru construirea interfețelor web. Proiectat să fie adoptabil incremental, Vue poate fi folosit atât ca un simplu script adăugat într-o pagină HTML existentă, cât și ca un fundament enterprise complet atunci când este combinat cu Nuxt 3 (framework-ul full-stack de referință bazat pe motorul Nitro).
Odată cu lansarea Vue 3 și a sintaxei standard <script setup> din Composition API, Vue combină performanța extremă a Proxy-urilor JavaScript ES6 native cu o ergonomie impecabilă de organizare a logicii în funcții compozabile (Composables) tipizate nativ în TypeScript.
Arhitectura Reactivă a Vue 3 bazată pe ES6 Proxy
# Modificarea Stării (state.count++)
# │
# ▼
# [ES6 Proxy Trap (get/set/has)]
# ├── 'track': Înregistrează automat ce componentă sau efect (watchEffect) citește proprietatea
# └── 'trigger': Notifică doar nodurile DOM abonate la acea proprietate exactă!
# │
# ▼
# [Virtual DOM Patching Optimizat]
# - Datorită analizării statice a template-ului la compilare (Patch Flags),
# Vue sare direct la elementul dinamic, fără a re-compara întregul arbore DOM!Pilonii Tehnologici ai Ecosistemului Vue 3
| Concept Cheie | Mecanism Tehnic | Avantaj în Dezvoltare |
|---|---|---|
| Composition API | Gruparea logicii pe funcționalități independente în loc de opțiuni rigide (data, methods). |
Reutilizare impecabilă de cod între componente fără coliziuni de nume. |
Sintaxa <script setup> |
Zahăr sintactic la compilare care expune automat variabilele și importurile direct în template. | Zero boilerplate, performanță de execuție superioară și suport TypeScript de primă clasă. |
| Pinia State Store | Înlocuitorul oficial modern al Vuex, complet tipizat, modular și compatibil cu DevTools. | Store-uri independente fără mutații greoaie; suport complet pentru auto-completare IDE. |
| Nuxt 3 & Nitro | Framework full-stack cu rutare automată, randare universală (SSR/SSG) și funcții server. | SEO perfect, performanță Lighthouse de 100/100 și deploy pe orice provider serverless/edge. |
Componentă Vue 3 cu <script setup> și Composition API
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
// Definirea stării reactive:
const count = ref(0);
const multiplier = ref(2);
// Proprietate calculată reactivă (cached):
const total = computed(() => count.value * multiplier.value);
function increment() {
count.value++;
}
onMounted(() => {
console.log('Componenta Vue a fost montată pe ecran!');
});
</script>
<template>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
<h2 class="text-xl font-bold text-gray-900">Contor Reactiv Vue 3</h2>
<p class="text-gray-600">Valoare curentă: <strong>{{ count }}</strong></p>
<p class="text-indigo-600 font-semibold">Total multiplicat: {{ total }}</p>
<button @click="increment" class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition">
Incrementează (+1)
</button>
</div>
</template>