# Introduction

INFO

Vous ne connaissez pas Vue.js ? Consultez notre Guide des fondamentaux pour commencer.

Ce guide s'adresse principalement aux utilisateurs ayant déjà une expérience de Vue 2 et qui souhaitent se familiariser avec les nouvelles fonctionnalités et les changements de Vue 3. Il ne s'agit pas d'un document que vous devez lire de bout en bout avant d'essayer Vue 3. Bien qu'il semble que beaucoup de choses aient changé, une grande partie de ce que vous connaissez et aimez de Vue est toujours la même ; mais nous avons voulu être aussi minutieux que possible et fournir des explications détaillées et des exemples pour chaque changement documenté.

Démarrage rapide
Nouvelles fonctionnalités notables
Breaking Changes
Supporting Libraries

# Overview

Commencez à apprendre Vue 3 à Vue Mastery (opens new window).

# Démarrage rapide

Via CDN : <script src="https://unpkg.com/vue@next"></script>
Terrain de jeu dans le navigateur sur Codepen (opens new window)
Sandbox dans le navigateur sur CodeSandbox (opens new window)

Échafaudage via Vite (opens new window) :

npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3

Scaffold via vue-cli (opens new window):

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

1
2
3

# Nouvelles fonctionnalités notables

Voici quelques-unes des nouvelles fonctionnalités à surveiller dans Vue 3 :

Composition API
Teleport
Fragments
Option d'émission de composants
createRenderer API from @vue/runtime-core (opens new window) to create custom renderers
SFC Composition API Syntax Sugar (<script setup>) (opens new window) experimental
SFC State-driven CSS Variables (<style vars>) (opens new window) experimental
SFC <style scoped> can now include global rules or rules that target only slotted content (opens new window)

# Breaking Changes

INFO

Nous travaillons toujours sur une version de migration dédiée de Vue 3 avec un comportement compatible avec Vue 2 et des avertissements d'utilisation incompatible. Si vous envisagez de migrer une application Vue 2 non triviale, nous vous recommandons fortement d'attendre la Migration Build pour une expérience plus fluide.

Ce qui suit consiste en une liste de changements de rupture par rapport à la version 2.x :

# API globale

# Directives pour les templates

# Les Composants

# Fonction de rendu

# Éléments personnalisés

# Autres changements mineurs

L'option de cycle de vie destroyed a été renommée en unmounted.
L'option de cycle de vie beforeDestroy a été renommée en beforeUnmount.
La fonction de fabrique des props default n'a plus accès au contexte this
L'API des directives personnalisées a été modifiée pour s'aligner sur le cycle de vie des composants
L'option data doit toujours être déclarée comme une fonction](/guide/migration/data-option.html)
L'option data des mixins est maintenant fusionnée de manière superficielle
La stratégie de coercition des attributs a été modifiée
Certaines classes de transition ont été renommées
<TransitionGroup> ne rend plus d'élément wrapper par défaut
Lorsque l'on surveille un tableau, la callback ne se déclenche que lorsque le tableau est remplacé. Si vous avez besoin de déclencher une mutation, l'option deep doit être spécifiée
Les balises <template> sans directives spéciales (v-if/else-if/else, v-for, ou v-slot) sont maintenant traitées comme des éléments ordinaires et donneront lieu à un élément <template> natif au lieu de rendre son contenu interne.
Dans Vue 2.x, le outerHTML du conteneur racine de l'application est remplacé par le modèle du composant racine (ou éventuellement compilé en modèle, si le composant racine n'a pas d'option de modèle/rendu). Vue 3.x utilise maintenant le innerHTML du conteneur de l'application à la place - cela signifie que le conteneur lui-même n'est plus considéré comme faisant partie du modèle.

# APIs supprimées

Support du keyCode en tant que modificateurs v-on
Méthodes d'instance $on, $off et $once
Filtres
Attributs des modèles en ligne
Propriété d'instance $children
Méthode d'instance $destroy. Les utilisateurs ne doivent plus gérer manuellement le cycle de vie des composants Vue individuels.

# Bibliothèques supportées

Toutes nos bibliothèques et tous nos outils officiels prennent désormais en charge Vue 3, mais la plupart d'entre eux sont encore en version bêta et distribués sous la balise next dist sur npm. **Nous prévoyons de stabiliser et de basculer tous les projets pour utiliser la balise dist latest d'ici la fin de 2020.

# Vue CLI

Depuis la version 4.5.0, vue-cli fournit maintenant l'option intégrée de choisir Vue 3 lors de la création d'un nouveau projet. Vous pouvez mettre à jour vue-cli et exécuter vue create pour créer un projet Vue 3 dès aujourd'hui.

# Vue Router

Vue Router 4.0 prend en charge Vue 3 et apporte un certain nombre de modifications importantes. Consultez son guide de migration (opens new window) pour plus de détails.

# Vuex

Vuex 4.0 assure la prise en charge de Vue 3 avec une API largement identique à celle de la version 3.x. La seule modification importante concerne l'installation du plugin (opens new window).

# Extension des Devtools

Nous travaillons sur une nouvelle version des Devtools avec une nouvelle interface utilisateur et des composants internes remaniés pour supporter plusieurs versions de Vue. La nouvelle version est actuellement en bêta et ne supporte que Vue 3 (pour l'instant). L'intégration de Vuex et Router est également en cours.

Pour Chrome : Installer à partir du magasin Web de Chrome (opens new window)
- Remarque : le canal bêta peut entrer en conflit avec la version stable de devtools. Vous devrez peut-être désactiver temporairement la version stable pour que le canal bêta fonctionne correctement.
Pour Firefox : Télécharger l'extension signée (opens new window) (fichier .xpi sous Assets)

# IDE Support

Il est recommandé d'utiliser VSCode (opens new window) avec notre extension officielle Vetur (opens new window), qui fournit un support IDE complet pour Vue 3.

# Other Projects

Project	npm	Repo
@vue/babel-plugin-jsx	(opens new window)	[GitHub (opens new window)]
eslint-plugin-vue	(opens new window)	[GitHub (opens new window)]
@vue/test-utils	(opens new window)	[GitHub (opens new window)]
vue-class-component	(opens new window)	[GitHub (opens new window)]
vue-loader	(opens new window)	[GitHub (opens new window)]
rollup-plugin-vue	(opens new window)	[GitHub (opens new window)]

INFO

Pour plus d'informations sur la compatibilité de Vue 3 avec les bibliothèques et les plugins, consultez ce problème dans awesome-vue (opens new window).

v-for Array Refs →