Introduction à Vue3
Vue3 est un framework progressif pour créer des interfaces utilisateur.
ProgressifCela signifie que vous pouvez n'introduire qu'une partie des capacités de Vue selon les besoins de votre projet : d'une simple amélioration de l'interaction de page, à la création d'applications monopages complètes (SPA), et même d'applications avec rendu côté serveur (SSR), Vue3 en est pleinement capable.
Vue3 est un framework JavaScript progressif pour le front-end, dirigé par Evan You, officiellement publié le 18 septembre 2020, sous le nom de codeOne Piece。
Comparé à Vue2, Vue3 a complètement réécrit l'architecture centrale : le système de réactivité est passé deObject.definePropertymis à niveau versProxy, introduisant la Composition API, et améliorant globalement les performances, la prise en charge de TypeScript, la taille du bundle, et plus encore.
Le positionnement officiel de Vue3 est :un framework facile à prendre en main, mais suffisamment puissant pour prendre en charge des projets complexes. Il n'impose pas d'architecture spécifique comme Angular, ni n'exige d'importantes optimisations manuelles comme React ; au contraire, il trouve un équilibre entre facilité d'utilisation et puissance.
Différences essentielles entre Vue3 et Vue2
Vue3 n'est pas une mise à niveau corrective de Vue2, mais une réécriture complète.
| Élément de comparaison | Vue2 | Vue3 |
|---|---|---|
| Principe de réactivité | Object.defineProperty, ne peut pas observer les propriétés nouvellement ajoutées et les changements d’index de tableau | Proxy, effectue un proxy complet de toutes les opérations sur l’objet, sans les limitations ci-dessus |
| Organisation du code | API Options : data, methods et computed sont séparés | API Composition : le code est regroupé par préoccupations logiques |
| Prise en charge de TypeScript | Adapté plus tard, inférence de type limitée | Code cœur réécrit en TypeScript, TS est un citoyen de première classe |
| Taille du bundle | Runtime : environ 20KB (gzip) | Prend en charge le Tree-shaking, le bundling à la demande, minimum seulement 13.5KB |
| Performance | Référence | Le rendu initial est plus rapide d’environ 55 %, le rendu de mise à jour est plus rapide d’environ 133 %, et l’utilisation de la mémoire est réduite d’environ 54 % |
| Nœud racine du template de composant | Doit avoir exactement un élément racine | Prend en charge plusieurs nœuds racines (Fragment) |
| API globale | Montée sur le constructeur Vue, plusieurs instances partagent l'état | ViacreateAppcréant des instances indépendantes, avec un isolement plus poussé |
Fonctionnalités principales
Les améliorations de Vue3 couvrent quatre dimensions : le système de réactivité, la conception de l'API, le compilateur et les nouveaux composants intégrés.
API de composition
L'API de composition est le changement de conception le plus important de Vue3 ; elle résout les problèmes fondamentaux de l'API Options de Vue2 :La logique associée est dispersée entre différentes options, ce qui rend sa réutilisation difficile。
Dans l'API Options, les données d'une fonctionnalité de « recherche utilisateur » peuvent être dispersées surdata、methods、computed、watchquatre options ; alors que l'API de composition vous permet d'écrire toute la logique d'une même fonctionnalité au même endroit, puis de l'extraire dans des fonctions réutilisables (Composables).
Exemple : API Options vs API de composition
<script>
export default {
data() {
return {
count: 0, // données du compteur
username: 'example' // données du nom d'utilisateur
}
},
computed: {
doubled() { // double du compteur
return this.count * 2
}
},
methods: {
increment() { // incrémente le compteur
this.count++
}
}
}
</script>
Exemple : approche recommandée (sucre syntaxique script setup)
<script setup>
import { ref, computed } from 'vue'
// Les données réactives sont déclarées directement, pas besoin de retourner
const count = ref(0) // ref encapsule les types primitifs
const username = ref('example')
// propriété calculée
const doubled = computed(() => count.value * 2)
// Les méthodes sont directement des fonctions
function increment() {
count.value++ // Remarque : les valeurs encapsulées par ref doivent être accédées via .value
}
</script>
<template>
<!-- Dans les templates, ref est automatiquement déballé, pas besoin de .value -->
<p>Utilisateur : {{ username }}</p>
<p>Compteur : {{ count }}, double : {{ doubled }}</p>
<button @click="increment">+1</button>
</template>
<script setup>est du sucre syntaxique pour la Composition API, il vous permet de<script>d'écrire directement du code de la Composition API au niveau supérieur, sans avoir à le faire manuellementreturn, toutes les variables et fonctions de niveau supérieur sont automatiquement exposées au template. C'est actuellement la manière la plus largement utilisée d'écrire des composants monofichiers dans Vue3.
Système de réactivité : Proxy remplace defineProperty
La réactivité de Vue2 est basée surObject.defineProperty, cette approche a deux problèmes qui ne peuvent pas être résolus : elle ne peut pas observer les propriétés d'objet nouvellement ajoutées, et elle ne peut pas observer l'affectation directe à des éléments de tableau par index. Vue3Proxypour résoudre fondamentalement ces deux problèmes.
Exemple : ref et reactive
// ref : convient aux types primitifs (number, string, boolean)
// L'accès et la modification des valeurs nécessitent .value
const count = ref(0)
count.value = 10
// reactive : convient aux objets et aux tableaux
// Accédez directement aux propriétés, pas besoin de .value
const user = reactive({
name: 'EXAMPLE',
age: 18,
skills: ['vue', 'typescript']
})
// Dans Vue3, vous pouvez ajouter de nouvelles propriétés à un objet et la réactivité fonctionne toujours normalement
user.email = '[email protected]' // Dans Vue2, cette opération ne déclenche pas de mise à jour de la vue
// Vous pouvez également modifier directement les éléments du tableau
user.skills[0] = 'vue3' // Dans Vue2, cette opération ne déclenche pas de mise à jour de la vue
// Surveiller les changements de données réactives
watch(count, (newVal, oldVal) => {
console.log(`compte de ${oldVal}à ${newVal}`)
})
Fonctions composables (Composables)
Les composables sont la méthode standard pour réutiliser la logique avec état dans Vue3, comme les Hooks personnalisés de React.
Il est d'usage deusepréfixer le nom, extraire une partie complète de logique réactive dans une fonction indépendante, et la réutiliser dans plusieurs composants.
Exemple : composable personnalisé
// Encapsuler la logique du compteur ; n'importe quel composant peut la réutiliser
import { ref, computed } from 'vue'
export function useCounter(initialValue = 0) {
const count = ref(initialValue) // État réactif interne
const doubled = computed(() => count.value * 2) // État dérivé
function increment() { count.value++ }
function decrement() { count.value-- }
function reset() { count.value = initialValue }
// Retourner l'état et les méthodes qui doivent être exposés à l'extérieur
return { count, doubled, increment, decrement, reset }
}
Exemple : Utilisation d'un composable dans des composants
import { useCounter } from './composables/useCounter'
// Déstructurer et utiliser directement ; la réactivité est préservée
const { count, doubled, increment, decrement, reset } = useCounter(10)
</script>
<template>
<p>Valeur actuelle : {{ count }}, doublée : {{ doubled }}</p>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<button @click="reset">Réinitialiser</button>
</template>
Nouveaux composants intégrés
Vue3 introduit trois nouveaux composants intégrés qui résolvent trois scénarios fréquents du développement frontend.
| Composant | Problème résolu | Cas d'utilisation typiques |
|---|---|---|
| Fragment | Vue2 exigeait que les modèles de composants aient un seul nœud racine ; Fragment permet à plusieurs nœuds racine de coexister (aucun div d'enveloppement supplémentaire nécessaire) | Composants d'élément de liste, réduisant l'imbrication DOM inutile |
| Teleport | Rend le HTML d'un composant à n'importe quelle position spécifiée dans le DOM, en s'affranchissant des limitations de contexte d'empilement CSS du composant parent | Boîtes de dialogue modales globales, notifications Toast, barres d'outils flottantes |
| Suspense | Affiche élégamment un contenu de repli avant que les composants asynchrones aient terminé leur chargement, en gérant uniformément les états d'attente asynchrones | Écrans squelettes pour les composants chargés à la demande, indicateurs de chargement pendant les transitions de route |
Exemple : utilisation de Teleport pour implémenter une modale globale
import { ref } from 'vue'
const showModal = ref(false)
</script>
<template>
<button @click="showModal = true">Ouvrir la modale</button>
<!--
Teleport monte le contenu de la modale sous body,
plutôt qu'à l'intérieur de l'élément parent du composant actuel, ce qui évite les problèmes de z-index et d'overflow
-->
<Teleport to="body">
<div v-if="showModal" class="modal-mask">
<div class="modal-box">
<p>Ceci est une modale globale</p>
<button @click="showModal = false">Fermer</button>
</div>
</div>
</Teleport>
</template>
Exemple : Utilisation de Suspense pour gérer le chargement asynchrone de composants
<template>
<Suspense>
<!-- Slot par défaut : contenu asynchrone -->
<template #default>
<AsyncUserProfile /> <!-- Composants asynchrones qui utilisent await en interne -->
</template>
<!-- slot de secours : contenu affiché pendant le chargement -->
<template #fallback>
<div class="loading">Chargement...</div>
</template>
</Suspense>
</template>
Prise en charge du tree-shaking
Vue3 transforme toutes les API globales en exports nommés. Grâce à la capacité de tree-shaking de bundlers comme Vite / webpack, les API inutilisées ne sont pas intégrées dans la sortie finale.
Exemple : importer des API à la demande
// Vue.nextTick(...)
// Vue.set(obj, 'key', value)
// Vue3 : import à la demande ; seules les fonctions réellement utilisées sont incluses dans le bundle
import { ref, computed, watch, nextTick, onMounted } from 'vue'
// Seules ces API sont importées ; celles non utilisées (telles que watchEffect, provide, etc.) ne seront pas incluses dans le bundle
Hooks de cycle de vie
Tous les hooks de cycle de vie correspondant à l'API de composition de Vue3 sont préfixés paronet sont appelés danssetupsetup().
| API Options de Vue2 | Vue3 API de composition | Moment de déclenchement |
|---|---|---|
beforeCreate | — (setup lui-même remplace ceci) | Avant l'initialisation de l'instance |
created | — (setup lui-même remplace ceci) | Instance créée |
beforeMount | onBeforeMount | Avant le montage |
mounted | onMounted | Monté, DOM accessible |
beforeUpdate | onBeforeUpdate | Avant la mise à jour des données et le re-rendu du DOM |
updated | onUpdated | Une fois le re-rendu du DOM terminé |
beforeDestroy | onBeforeUnmount | Avant le démontage du composant (nom modifié) |
destroyed | onUnmounted | Démontage du composant terminé (nom modifié) |
Exemple : Utilisation des hooks de cycle de vie
import { ref, onMounted, onUnmounted } from 'vue'
const timer = ref(null)
const count = ref(0)
// Exécuté après le montage du composant (le DOM peut être manipulé en toute sécurité)
onMounted(() => {
console.log('Component mounted')
// Démarrer un minuteur qui incrémente le compteur chaque seconde
timer.value = setInterval(() => {
count.value++
}, 1000)
})
// Exécuté lorsque le composant est démonté (nettoyer les effets secondaires pour éviter les fuites de mémoire)
onUnmounted(() => {
clearInterval(timer.value)
console.log('Timer cleared')
})
</script>
<template>
<p>Durée d'exécution : {{ count }} secondes</p>
</template>
Prise en charge complète de TypeScript
La bibliothèque principale de Vue 3 est entièrement réécrite en TypeScript, offrant une inférence de type précise. Combinée avec<script setup lang="ts">, vous pouvez utiliser TypeScript directement dans les composants monofichiers sans configuration supplémentaire.
Exemple : Utilisation de TypeScript dans script setup
import { ref, computed } from 'vue'
// Interface définissant la structure de données dans le composant
interface User {
id: number
name: string
email?: string
}
// ref infère automatiquement le type à partir de la valeur initiale, ou il peut être spécifié explicitement
const user = ref<User>({
id: 1,
name: 'EXAMPLE',
})
// defineProps : déclarer et inférer les types de props
const props = defineProps<{
title: string //Requis
count?: number //Optionnel
}>()
// defineEmits : déclarer et vérifier le typage des événements personnalisés
const emit = defineEmits<{
(e: 'update', value: number): void
(e: 'close'): void
}>()
const displayName = computed(() => user.value.name.toUpperCase())
function handleUpdate() {
emit('update', 42)
}
</script>
Domaines d’application
En tant qu'écosystème complet de framework frontend, Vue3 couvre un large éventail de scénarios, des applications monopages au rendu côté serveur, du Web au mobile.
Applications monopages (SPA)
C'est le cas d'usage le plus classique de Vue3. Combiné avecVue Router 4pour le routage frontend,Pinia(la bibliothèque de gestion d'état officiellement recommandée par Vue3, remplaçant Vuex) pour gérer l'état global, vous pouvez construire des applications monopages entièrement fonctionnelles.
Types de projets typiques : systèmes d'administration d'entreprise, tableaux de bord de données, vitrines e-commerce.
Rendu côté serveur (SSR) et génération de site statique (SSG)
Nuxt 3est un framework full-stack basé sur Vue3, intégrant profondément les capacités SSR et SSG. Il gère automatiquement la complexité du rendu côté serveur, permettant aux développeurs de créer des applications optimisées pour le SEO comme s'ils écrivaient des composants Vue classiques.
Scénarios adaptés : sites de contenu, blogs, sites de documentation, pages de destination marketing.
Mobile et multiplateforme
uni-appPermet d'utiliser la syntaxe Vue3 pour développer simultanément des Mini Programmes WeChat, des Mini Programmes Alipay, du H5 et des applications (iOS/Android).Ionic + Vue3convient pour créer des applications mobiles hybrides de haute qualité.
Applications de bureau
Electron + Vue3(via des chaînes d'outils comme electron-vite) peut empaqueter des applications Vue3 en applications de bureau multiplateformes.Tauri + Vue3est une alternative populaire ces dernières années, utilisant Rust comme backend, ce qui réduit la taille des applications et améliore les performances.
Écosystème de bibliothèques de composants UI
L'écosystème Vue3 offre un riche choix de bibliothèques de composants matures :
| Bibliothèque de composants | Positionnement | Scénarios adaptés |
|---|---|---|
| Element Plus | Bibliothèque de composants pour PC de bureau, la version Vue3 d'Element UI | Systèmes d'administration d'entreprise, applications à forte intensité de données |
| Ant Design Vue | Implémentation Vue d'Ant Design, avec des spécifications de conception matures | Systèmes middle/back-office, applications d'entreprise |
| Vant 4 | Bibliothèque de composants mobiles, légère et performante | H5 mobile, mini-programmes WeChat |
| Vuetify 3 | Bibliothèque de composants de style Material Design | Applications web grand public |
| Naive UI | Écrit en TypeScript, avec de puissantes capacités de personnalisation du thème | Projets nécessitant une personnalisation approfondie du thème |
| shadcn-vue | Basé sur Radix UI et Tailwind, une collection de composants à copier-coller | Projets qui valorisent l'unicité de l'interface utilisateur |
Historique du développement
Vue.js est passé d'un projet personnel à l'un des trois principaux frameworks front-end au monde. Chaque version majeure a été motivée par des besoins d'ingénierie clairs.
Origines (2013 - 2014)
Vue.js a été créé par Evan You pendant son passage chez Google. En 2013, il a exploré l'expérience de développement avec Angular, en espérant en extraire sa partie préférée — le mécanisme de mise à jour de la vue piloté par les données — tout en supprimant les parties qu'il jugeait trop lourdes.
En février 2014, Vue.js 0.8.0 a été rendu public. Il a par la suite attiré l'attention de la communauté Laravel et est progressivement devenu bien connu dans la communauté JavaScript.
Ère Vue 1.x (2015)
En octobre 2015, Vue 1.0 a été officiellement publié, sous le nom de code Evangelion. La même année,Vue Router（2015.08）、Vuex（2015.11）、Vue CLI(décembre 2015) ont été publiés successivement, marquant l'évolution de Vue d'une bibliothèque de couche de vue vers un framework progressif complet.
Ère Vue 2.x (2016 - 2020)
En octobre 2016, Vue 2.0 est sorti, introduisant une approche par DOM virtuel (inspirée de React), prenant en charge le rendu côté serveur (SSR) et améliorant considérablement les performances.
L'ère Vue 2 a été la phase d'expansion la plus rapide de l'écosystème Vue : des bibliothèques de composants telles qu'Element UI ont émergé, Nuxt.js est apparu, et Vue est devenu l'un des frameworks front-end comptant le plus d'étoiles GitHub au monde.
En février 2019, Vue 2.6 est sorti, sous le nom de code Macross. C'était la dernière version majeure de Vue 2, faisant le lien entre le passé et l'avenir.
Sortie de Vue 3.0 (2020)
Le développement de Vue3 a commencé fin 2018 et a pris environ deux ans, passant par plus de 30 RFC (Request for Comments), plus de 2600 commits et 628 PR de 99 contributeurs.
Le 18 septembre 2020, Vue 3.0 a été officiellement publiée, sous le nom de code One Piece. Principaux changements :
- Le système réactif est basé sur
ProxyRéécrit - Introduction de la Composition API
- Prise en charge complète de TypeScript
- Ajout de Fragment, Teleport, Suspense
- Prend en charge le Tree-shaking, taille du bundle considérablement réduite
Phase de maturation de l'écosystème (2021 - 2022)
| Temps | Version / Événement | Importance du jalon |
|---|---|---|
| 2021-08 | Vue 3.2 | <script setup>Le sucre syntaxique s'est officiellement stabilisé,<style> v-bindPrend en charge la liaison dynamique CSS, devenue l'une des versions de Vue 3 les plus populaires |
| 2022-02 | Vue 3 est devenue la version par défaut | Sur le site officiel de vue.js et npmvueLa version par défaut du package est passée de 2 à 3, marquant la domination officielle de l'écosystème Vue 3 |
| 2022-05 | Pinia est devenue la recommandation officielle | Les plans de Vuex 5 ont été abandonnés, Pinia est devenue la bibliothèque de gestion d'état officiellement recommandée pour Vue 3 |
| 2022 | Vue 3.3 | Prise en charge améliorée des composants génériques, meilleuredefinePropsinférence de type, améliorant considérablement l'expérience TypeScript |
Phase d'optimisation continue (2023 - Aujourd'hui)
| Temps | Version | Caractéristiques clés |
|---|---|---|
| 2023-12 | Vue 3.4 | Réécriture du parseur de template (performances améliorées ~2x), optimisation du système réactif (réduction des déclenchements de calculs invalides),defineModelLa macro est officiellement stabilisée (simplifie la liaison bidirectionnelle v-model) |
| 2024-09 | Vue 3.5 | Déstructuration des props réactives officiellement stabilisée (déstructurer tout en conservant la réactivité sans toRef),useTemplateRefNouvelles API, hydratation différée SSR |
| 2025 (en développement) | Vue 3.6 | Système réactif Alien Signals intégré (mémoire de suivi des dépendances réduite d'environ 14%), Vapor Mode est entré en Alpha (contourne complètement le DOM virtuel, taille du bundle réduite de 50KB à ~6KB, temps de montage de 100,000 composants ~100ms) |
Vapor Modeest la direction technique future la plus importante pour Vue 3 : grâce à l'analyse statique à la compilation, les templates sont compilés directement en code précis de manipulation native du DOM, contournant complètement le processus de création et de diff du DOM virtuel. Il peut coexister avec le mode DOM virtuel existant et prend en charge la migration progressive. Ne prend actuellement en charge que
<script setup>Composition API ; Options API n'est pas applicable.
Position de Vue 3 parmi les trois principaux frameworks
Vue 3, React et Angular sont les trois principaux frameworks du développement front-end. Comprendre leurs positions aide à faire des choix technologiques plus appropriés.
| Critère de comparaison | Vue3 | React 18+ | Angular 17+ |
|---|---|---|---|
| Positionnement | Framework progressif, fournit officiellement le routage et la gestion d'état | Bibliothèque UI, écosystème piloté par la communauté | Framework complet, tout dispose de solutions officielles |
| Style de syntaxe | Composants monofichiers (.vue), syntaxe de template intuitive | JSX, écrire du HTML en JavaScript | Composants + templates + décorateurs, haut degré d'ingénierie |
| Courbe d'apprentissage | Relativement accessible, syntaxe de template proche du HTML | Modéré, nécessite de comprendre les modèles mentaux de JSX et des Hooks | Abrupt, nombreux concepts (modules, injection de dépendances, RxJS) |
| TypeScript | Bibliothèque principale réécrite en TS, bon support | Bon, nécessite @types/react | TypeScript par défaut, profondément intégré |
| Performance | Excellente, réactivité à grain fin, mises à jour précises | Bon, React 19 Compiler encore optimisé | Bon, le mécanisme Signals s'améliore continuellement |
| Échelle applicable | Adapté aux projets de petite et moyenne envergure comme aux grands projets | Toutes les échelles, cas matures dans des projets de très grande envergure | Projets de grande entreprise, exigences élevées de standardisation des équipes |
| Part de marché en Chine | La plus élevée, largement utilisée par les entreprises | Élevée | Relativement faible |
Dans l'écosystème front-end national, Vue 3 a le taux d'utilisation le plus élevé. Les bibliothèques de composants disposant d'une documentation chinoise complète telles qu'Element Plus et Ant Design Vue ont grandement abaissé la barrière à l'adoption en entreprise. Si votre objectif est le marché de l'emploi national, Vue 3 est l'un des frameworks qu'il vaut le plus la peine de prioriser.
Limites de Vue3
Comprendre les limites de Vue 3 peut vous aider à porter des jugements techniques plus rationnels.
| Limite | Manifestation spécifique | Recommandation |
|---|---|---|
| Coût de décision de la coexistence d'Options API et de Composition API | Deux styles d’API coexistent ; les équipes doivent s’accorder sur des normes unifiées, sinon les styles de code seront incohérents | Les nouveaux projets doivent utiliser uniformément<script setup> + Composition API |
| Charge mentale liée au .value pour les données réactives | refNécessaire dans les scripts.value, automatiquement déballé dans les templates, les débutants sont facilement confus | Utilisez le plugin Volar, l’IDE fournira des indications ; ce n’est plus un problème une fois l’habitude prise |
| Complexité de la gestion d’état pour les grandes applications | La prise en charge de la gestion d’état de Pinia pour les scénarios très volumineux et à forte concurrence est moins mature que celle de Redux | Les applications ultra-volumineuses peuvent évaluer des solutions Pinia + découpage modulaire |
| Coût d’hydratation du rendu côté serveur | Les pages SSR nécessitent une « hydratation », l’initialisation prend plus de temps sur les appareils bas de gamme | Vue 3.5 a introduit Lazy Hydration, le Vapor Mode de Vue 3.6 améliorera encore cela |
| Richesse de l'écosystème international | Par rapport à React, l'activité de la communauté anglophone de Vue et les ressources Stack Overflow sont légèrement moins nombreuses | La documentation officielle est d'une très grande qualité, la documentation chinoise est complète, privilégiez la consultation de la documentation officielle |