React ou Vue : les différences, code côte à côte

React et Vue sont deux outils JavaScript pour construire des interfaces utilisateur à partir de composants (React se présente comme une bibliothèque, Vue comme un framework progressif), et ils partagent la plupart des idées : props vers le bas, événements vers le haut, état réactif, DOM virtuel. Les différences pratiques : React écrit le balisage en JSX et attend que l'état soit remplacé avec un setter, tandis que Vue écrit le balisage dans des templates HTML au sein de composants monofichiers et vous laisse modifier directement les valeurs réactives. Voici un compteur en React :

import { useState } from 'react';

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

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

Et le même compteur sous forme de composant monofichier 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) devient ref(0), onClick devient @click, et {count} devient {{ count }}. La différence visible est count++ : Vue vous laisse modifier la valeur sur place, et son système de réactivité le remarque. React a besoin de setCount, car il ne refait le rendu que lorsque vous lui donnez une nouvelle valeur.

JSX ou composants monofichiers

Un composant React est une fonction JavaScript qui renvoie du JSX. Les conditions sont des && ou des ternaires, les listes sont des .map(), et les styles viennent de ce que vous choisissez (fichiers CSS, CSS modules, framework utilitaire).

Un composant Vue est généralement un fichier .vue avec trois blocs : <script setup> pour la logique, <template> pour le balisage, et un <style scoped> facultatif dont le CSS ne s'applique qu'à ce composant. Les templates utilisent des directives : v-if, v-for, v-model pour la liaison bidirectionnelle des champs, :prop pour lier une valeur et @event pour écouter. Les templates gardent le balisage lisible pour quiconque connaît le HTML ; le JSX vous donne tout JavaScript dans le balisage. Vue peut aussi utiliser le JSX et React ne peut pas utiliser de templates, mais la plupart du code de chacun suit son choix par défaut.

Voici une liste filtrée, la deuxième fonctionnalité à comparer.

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>
    );
}

Essayez de taper xyz pour voir le message vide, puis effacez-le. La version 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 remplace la paire value et onChange, et computed remplace la simple variable. En React, visible est recalculé à chaque rendu parce que la fonction composant s'exécute à nouveau ; en Vue, computed le met en cache et ne le recalcule que lorsque query change. Les deux utilisent une key pour distinguer les éléments de la liste.

Le modèle de réactivité

C'est la différence la plus profonde entre les deux.

React : état immuable et nouveaux rendus. L'état est un instantané. Vous appelez un setter avec une nouvelle valeur, React exécute à nouveau la fonction composant, compare le nouveau JSX à l'ancien et met à jour le DOM. React compare les valeurs avec Object.is, donc modifier un objet ou un tableau sur place et repasser le même ressemble à une absence de changement.

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>
    );
}

Cliquez sur "push() in place" et rien ne change à l'écran, car le tableau est le même objet. Cliquez ensuite sur "New array" : le rendu affiche aussi pushed, car la mutation précédente a bien eu lieu, React n'avait simplement aucune raison de regarder. La page sur useState traite ce pattern en profondeur.

Vue : des valeurs réactives modifiables. Une ref ou un objet reactive enregistre qui le lit (une ref via son getter .value, un objet reactive via un proxy). Quand vous y écrivez, Vue sait exactement quelles valeurs calculées, quels watchers et quelles parties du template en dépendent et ne met à jour que celles-ci. En Vue, items.value.push('pushed') met l'écran à jour. Vous écrivez moins de cérémonie, et vous renoncez à la garantie qu'une valeur ne change jamais sans que vous le sachiez.

Aucun des deux modèles n'est plus rapide d'une manière qui compte pour des applications typiques. React peut exécuter plus de code de composant par changement et s'appuie sur la mémoïsation (à la main, ou via React Compiler) pour éviter du travail ; Vue suit les dépendances à l'exécution et évite donc ce travail par défaut.

Composition API ou hooks

La Composition API de Vue 3 et les hooks React résolvent le même problème : regrouper l'état et la logique liés et les réutiliser entre composants. Vue appelle les fonctions réutilisables des composables (useMouse()), React les appelle des hooks personnalisés (useMouse()). Les règles diffèrent selon le moment où le code s'exécute.

• Quand il s'exécute. Un setup Vue s'exécute une fois à la création du composant. Une fonction composant React s'exécute à chaque rendu, et les hooks qu'elle contient avec elle.
• Règles d'ordre. React associe les hooks par ordre d'appel, vous ne pouvez donc pas les appeler dans des conditions ou des boucles. Vue n'a pas de telle règle pour ref et computed, car setup s'exécute une seule fois.
• Dépendances. Les effets et les mémos React listent leurs dépendances dans un tableau que vous maintenez. Le watchEffect et le computed de Vue suivent automatiquement ce qu'ils lisent.
• Valeurs périmées. Un callback React peut capturer une ancienne valeur d'état d'un rendu précédent (le bug classique de setInterval). Un callback Vue lit count.value au moment de l'appel et voit toujours la valeur actuelle.

Le modèle de React fait de chaque rendu une fonction pure des props et de l'état, ce qui est facile à tester et à raisonner. Le modèle de Vue supprime une classe de bugs liés aux tableaux de dépendances. Les développeurs qui connaissent l'un apprennent généralement l'autre rapidement.

Écosystème

Ce que montre ce tableau : l'équipe principale de Vue maintient ensemble le routeur, le store et les devtools, donc un projet Vue a un choix par défaut évident pour chacun. React laisse cela à la communauté, ce qui vous donne plus d'options et plus de décisions. Vite, l'outil de build habituel des nouveaux projets dans les deux cas, a été lancé par le créateur de Vue.

Courbe d'apprentissage

Vue est souvent un départ plus doux. Les templates se lisent comme le HTML que vous connaissez déjà, v-model supprime le code répétitif des champs contrôlés, et une valeur réactive met l'écran à jour quand vous la modifiez. React demande d'emblée le JSX et l'habitude des mises à jour immuables, et la page sur le JSX est la première dont la plupart des gens ont besoin.

Après les bases, l'écart se réduit. Vue ajoute ses propres concepts (refs ou objets reactive, .value dans les scripts mais pas dans les templates, watchers), et React ajoute les effets, la mémoïsation et les règles des hooks. Les offres d'emploi de votre région départagent plus utilement que la syntaxe.

Quand choisir lequel

Choisissez React quand :

• Vous voulez un large choix de bibliothèques et de composants de la communauté, ou vous prévoyez de construire des applications mobiles natives avec React Native.
• Vous aimez garder la logique et le balisage dans une seule fonction JavaScript et voulez un framework comme Next.js.
• Votre équipe apprécie les mises à jour explicites et immuables qui rendent chaque rendu facile à suivre.

Choisissez Vue quand :

• Vous voulez des outils officiels et cohérents pour le routage et l'état, et moins de décisions à prendre.
• Votre équipe comprend des designers ou des développeurs back-end à l'aise avec les templates HTML.
• Vous ajoutez de l'interactivité à des pages existantes rendues côté serveur : Vue peut être ajouté à une page par une balise script et grandir à partir de là.

Les deux sont matures et utilisés en production par des entreprises de toutes tailles, et les concepts appris avec l'un (composants, props, état dérivé, listes avec keys) se transposent directement à l'autre.