React vs Vue: differenze con codice a confronto

React e Vue sono entrambi strumenti JavaScript per costruire interfacce utente a partire da componenti (React si definisce una libreria, Vue un framework progressivo), e condividono la maggior parte delle idee: props verso il basso, eventi verso l'alto, stato reattivo, un virtual DOM. Le differenze pratiche sono che React scrive il markup in JSX e si aspetta che lo stato venga sostituito con un setter, mentre Vue scrive il markup in template HTML dentro single file component e ti permette di cambiare direttamente i valori reattivi. Ecco un contatore in React:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

Ed ecco lo stesso contatore come single file component di Vue (Counter.vue):

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

const count = ref(0);
</script>

<template>
    <button @click="count++">Clicked {{ count }} times</button>
</template>

useState(0) diventa ref(0), onClick diventa @click, e {count} diventa {{ count }}. La differenza visibile è count++: Vue ti permette di cambiare il valore sul posto, e il suo sistema di reattività se ne accorge. React ha bisogno di setCount perché esegue un nuovo render solo quando gli consegni un nuovo valore.

JSX vs single file component

Un componente React è una funzione JavaScript che restituisce JSX. Le condizioni sono && o un ternario, le liste sono .map(), e gli stili arrivano da ciò che scegli tu (file CSS, CSS modules, un framework di utilità).

Un componente Vue è di solito un file .vue con tre blocchi: <script setup> per la logica, <template> per il markup e un <style scoped> facoltativo il cui CSS si applica solo a quel componente. I template usano le direttive: v-if, v-for, v-model per il binding bidirezionale degli input, :prop per legare un valore e @event per ascoltare un evento. I template mantengono il markup leggibile per chiunque conosca l'HTML; JSX ti dà tutto JavaScript nel markup. Anche Vue può usare JSX e React non può usare i template, ma la maggior parte del codice di ciascuno segue la propria impostazione predefinita.

Ecco una lista filtrata, la seconda funzionalità da confrontare.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Prova a scrivere xyz per vedere il messaggio di lista vuota, poi cancellalo. La versione Vue:

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

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
const query = ref('');

const visible = computed(() =>
    fruits.filter((f) => f.toLowerCase().includes(query.value.toLowerCase()))
);
</script>

<template>
    <input v-model="query" placeholder="Filter fruit" />
    <ul>
        <li v-for="fruit in visible" :key="fruit">{{ fruit }}</li>
        <li v-if="visible.length === 0">No match</li>
    </ul>
</template>

v-model sostituisce la coppia value più onChange, e computed sostituisce la semplice variabile. In React, visible viene ricalcolato a ogni rendering perché la funzione del componente viene rieseguita; in Vue, computed lo mette in cache e lo ricalcola solo quando query cambia. Entrambi usano una key per distinguere le voci della lista.

Il modello di reattività

Questa è la differenza più profonda tra i due.

React: stato immutabile e nuovi render. Lo stato è un'istantanea. Chiami un setter con un nuovo valore, React esegue di nuovo la funzione del componente, confronta il nuovo JSX con il vecchio e aggiorna il DOM. React confronta i valori con Object.is, quindi modificare un oggetto o un array sul posto e ripassare lo stesso sembra non cambiare nulla.

import { useState } from 'react';

export default function App() {
    const [items, setItems] = useState(['one']);

    function mutate() {
        items.push('pushed');
        setItems(items);
    }

    function replace() {
        setItems([...items, 'added']);
    }

    return (
        <div>
            <button onClick={mutate}>push() in place</button>
            <button onClick={replace}>New array</button>
            <p>{items.join(', ')}</p>
        </div>
    );
}

Clicca "push() in place" e sullo schermo non cambia nulla, perché l'array è lo stesso oggetto. Poi clicca "New array": il rendering mostra anche pushed, perché la mutazione precedente è avvenuta davvero, solo che React non aveva motivo di guardare. La pagina su useState tratta questo schema in profondità.

Vue: valori reattivi modificabili. Un ref o un oggetto reactive registra chi lo legge (un ref tramite il suo getter .value, un oggetto reactive tramite un proxy). Quando ci scrivi, Vue sa esattamente quali valori computed, watcher e parti di template dipendono da esso e aggiorna solo quelli. In Vue, items.value.push('pushed') aggiorna lo schermo. Scrivi meno codice cerimoniale, e rinunci alla garanzia che un valore non cambi mai sotto i tuoi occhi.

Nessuno dei due modelli è più veloce in un modo che conti per le app tipiche. React può eseguire più codice dei componenti per ogni cambiamento e si affida alla memoizzazione (a mano, o tramite React Compiler) per saltare lavoro; Vue traccia le dipendenze a runtime quindi salta quel lavoro per default.

Composition API vs hook

La Composition API di Vue 3 e gli hook di React risolvono lo stesso problema: mettere insieme stato e logica correlati e riutilizzarli tra i componenti. Vue chiama le funzioni riutilizzabili composable (useMouse()), React le chiama hook personalizzati (useMouse()). Le regole sono diverse a causa del momento in cui il codice viene eseguito.

• Quando viene eseguito. Un setup di Vue viene eseguito una volta quando il componente viene creato. Una funzione componente di React viene eseguita a ogni rendering, e gli hook al suo interno vengono eseguiti con essa.
• Regole sull'ordine. React abbina gli hook per ordine di chiamata, quindi non puoi chiamarli dentro condizioni o cicli. Vue non ha una regola del genere per ref e computed, perché setup viene eseguito una volta.
• Dipendenze. Effetti e memo di React elencano le loro dipendenze in un array che mantieni tu. watchEffect e computed di Vue tracciano automaticamente ciò che leggono.
• Valori vecchi. Una callback di React può catturare un vecchio valore di stato di un rendering precedente (il classico bug di setInterval). Una callback di Vue legge count.value al momento della chiamata e vede sempre il valore attuale.

Il modello di React rende ogni rendering una funzione pura di props e stato, facile da testare e su cui ragionare. Il modello di Vue elimina una categoria di bug legati agli array delle dipendenze. Chi conosce uno dei due di solito impara l'altro in fretta.

Ecosistema

Lo schema di quella tabella: il core team di Vue mantiene insieme router, store e devtools, quindi un progetto Vue ha una scelta predefinita ovvia per ciascuno. React li lascia alla comunità, il che ti dà più opzioni e più decisioni. Vite, il solito strumento di build per i nuovi progetti in entrambi, è stato avviato dal creatore di Vue.

Curva di apprendimento

Vue è spesso l'inizio più dolce. I template si leggono come l'HTML che già conosci, v-model elimina il codice ripetitivo degli input controllati, e un valore reattivo aggiorna lo schermo quando lo cambi. React chiede subito JSX e l'abitudine agli aggiornamenti immutabili, e la pagina su JSX è la prima cosa di cui la maggior parte delle persone ha bisogno.

Dopo le basi, la distanza si riduce. Vue aggiunge i suoi concetti (ref vs oggetti reactive, .value negli script ma non nei template, watcher), e React aggiunge effetti, memoizzazione e le regole degli hook. Gli annunci di lavoro nella tua zona sono un criterio di scelta più utile della sintassi.

Quando scegliere quale

Scegli React quando:

• Vuoi un'ampia scelta di librerie e componenti della comunità, o hai in programma di costruire app mobile native con React Native.
• Ti piace tenere logica e markup in un'unica funzione JavaScript e vuoi un framework come Next.js.
• Il tuo team apprezza aggiornamenti espliciti e immutabili che rendono ogni rendering facile da seguire.

Scegli Vue quando:

• Vuoi strumenti ufficiali e coordinati per routing e stato e meno decisioni da prendere.
• Il tuo team include designer o sviluppatori back end che si trovano bene con i template HTML.
• Stai aggiungendo interattività a pagine esistenti renderizzate lato server: Vue può essere inserito in una pagina da un tag script e crescere da lì.

Entrambi sono maturi e usati in produzione da aziende di ogni dimensione, e i concetti che impari in uno (componenti, props, stato derivato, liste con key) si trasferiscono direttamente all'altro.