Introduction
JavaScript pur vs Vue.js
Avant de plonger dans Vue, posons-nous une question simple : pourquoi ne pas rester sur du JavaScript pur ?
Le vrai problème, c’est la réactivité : comment garder l’interface synchronisée avec les données ? En JavaScript pur, il n’existe aucun lien entre une variable et ce qui s’affiche à l’écran. Quand vous écrivez const tasks = [...], JavaScript stocke une valeur — il ne sait pas qu’un <ul> ou un <p> en dépend. Toute mise à jour de l’interface est de votre responsabilité.
Prenons un exemple concret — une liste de tâches avec un compteur :
Avec JavaScript pur
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tâches</title>
</head>
<body>
<p id="task-count">3 tâches</p>
<ul id="task-list"></ul>
<button id="add-btn">Ajouter une tâche</button>
<script>
const tasks = [‘Apprendre Vue’, ‘Créer un composant’, "Déployer l’app"]
function render() {
// Le compteur et la liste doivent être mis à jour séparément
document.getElementById(‘task-count’).textContent = tasks.length + ‘ tâches’
const list = document.getElementById(‘task-list’)
list.innerHTML = ‘’
tasks.forEach((task) => {
const li = document.createElement(‘li’)
li.textContent = task
list.appendChild(li)
})
}
document.getElementById(‘add-btn’).addEventListener(‘click’, () => {
tasks.push(‘Écrire des tests’)
render() // Oublier cet appel = compteur et liste désynchronisés
})
render() // Premier rendu manuel
</script>
</body>
</html>
Avec Vue.js
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tâches</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ tasks.length }} tâches</p>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
<button @click="tasks.push(‘Écrire des tests’)">Ajouter une tâche</button>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const tasks = ref([‘Apprendre Vue’, ‘Créer un composant’, "Déployer l’app"])
return { tasks }
}
}).mount(‘#app’)
</script>
</body>
</html>
Vue sait que {{ tasks.length }} et le v-for dépendent de tasks. Dès que le tableau change, le compteur et la liste se mettent à jour automatiquement — ensemble, sans rien oublier.
C’est ça, la réactivité : Vue observe vos données et répercute chaque changement dans l’interface. Vous décrivez ce que vous voulez afficher, pas comment le mettre à jour.
| JavaScript pur | Vue.js | |
|---|---|---|
| Rendu | Manuel (innerHTML, appendChild) | Automatique (réactivité) |
| Synchronisation | À gérer manuellement | Automatique |
| Lisibilité | Code impératif, difficile à suivre | Code déclaratif, proche du HTML |
| Scalabilité | Difficile à maintenir en grandissant | Structuré en composants |
Vue.js vs les autres frameworks
Vue n’est pas le seul framework front-end — React, Angular et Svelte sont ses principaux concurrents. Voici ce qui les distingue :
| JS / jQuery | Vue.js | React | Angular | |
|---|---|---|---|---|
| Créé par | Brendan Eich / John Resig | Evan You (ex-Google) | Meta (Facebook) | |
| Type | Langage / bibliothèque DOM | Framework progressif | Bibliothèque UI | Framework complet |
| Courbe d’apprentissage | Faible | Douce | Modérée (JSX, hooks) | Élevée (TypeScript obligatoire, RxJS) |
| Réactivité | Aucune — DOM manuel | Système de réactivité intégré | Via hooks (useState, useEffect) | Zone.js + détection de changements |
| Template | HTML + innerHTML / $(...) | HTML-like (.vue) | JSX (JavaScript + HTML mélangés) | HTML + directives Angular |
| Écosystème | Plugins jQuery | Vue Router, Pinia, Vite, Nuxt | React Router, Redux/Zustand, Next.js | Intégré (Router, Forms, HttpClient...) |
| Popularité | Legacy / maintenance | Très utilisé en Asie et Europe | Dominant dans l’industrie | Dominant en entreprise |
Single Page Application (SPA)
Une Single Page Application (SPA) est une application web qui charge dynamiquement le contenu sans recharger la page entière. Cela signifie que l’interface utilisateur est mise à jour en fonction des actions de l’utilisateur sans avoir à recharger la page. Les frameworks front-end comme Vue.js sont souvent utilisés pour créer des SPAs en raison de leur capacité à gérer efficacement les mises à jour de l’interface utilisateur.
┌─────────────────────────────────────────────────────────────┐
│ NAVIGATEUR (Frontend) │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Vue.js SPA │ │
│ │ - Composants réactifs │ │
│ │ - Navigation sans rechargement (Vue Router) │ │
│ │ - État global (Pinia) │ │
│ └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
↕ HTTP / WebSocket
┌─────────────────────────────────────────────────────────────┐
│ SERVEUR (Backend) │
│ API REST + Socket.io │
└─────────────────────────────────────────────────────────────┘