diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index ee6165bfb9..e2785ba994 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -1,16 +1,16 @@ --- -title: Migration from Vue Router 0.7.x (En) +title: Migration depuis Vue Router 0.7.x type: guide order: 702 --- -> Only Vue Router 2 is compatible with Vue 2, so if you're updating Vue, you'll have to update Vue Router as well. That's why we've included details on the migration path here in the main docs. For a complete guide on using the new Vue Router, see the [Vue Router docs](https://router.vuejs.org/en/). +> Seul Vue Router 2 est compatible avec Vue 2, donc si vous mettez à jour Vue, vous devez mettre à jour Vue Router également. C'est pourquoi nous avons inclus des détails de migration ici dans les documentations principales. Pour un guide complet sur l'utilisation du nouveau Vue Router, consultez [la documentation Vue Router](https://router.vuejs.org/fr/). -## Router Initialization +## Initialisation du Routeur -### `router.start` replaced +### `router.start` remplacée -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

There is no longer a special API to initialize an app with Vue Router. That means instead of:

+Il n'y a plus d'API dédiée pour initialiser Vue Router. Cela signifie qu'au lieu d'utiliser : ``` js router.start({ @@ -18,7 +18,7 @@ router.start({ }, '#app') ``` -You'll just pass a router property to a Vue instance: +Vous avez juste à passer la propriété `router` à l'instance de Vue : ``` js new Vue({ @@ -28,7 +28,7 @@ new Vue({ }) ``` -Or, if you're using the runtime-only build of Vue: +Ou, si vous utilisez le build runtime de Vue : ``` js new Vue({ @@ -40,16 +40,16 @@ new Vue({ {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of router.start being called.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.start.

{% endraw %} -## Route Definitions +## Définition de route -### `router.map` replaced +### `router.map` remplacée -Routes are now defined as an array on a [`routes` option](https://router.vuejs.org/en/essentials/getting-started.html#javascript) at router instantiation. So these routes for example: +Les routes sont maintenant définies dans un tableau dans [une option `routes`](https://router.vuejs.org/fr/essentials/getting-started.html#javascript) lors de l'instanciation du routeur. Donc ces routes par exemple : ``` js router.map({ @@ -62,7 +62,7 @@ router.map({ }) ``` -Will instead be defined with: +Seront à présent définies ainsi : ``` js var router = new VueRouter({ @@ -73,26 +73,26 @@ var router = new VueRouter({ }) ``` -The array syntax allows more predictable route matching, since iterating over an object is not guaranteed to use the same key order across browsers. +La syntaxe par tableau permet une plus grande prédictibilité de la concordance des routes, puisque l'itération sur un objet ne garantit pas le même ordre d'affichage sur tous les navigateurs. {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of router.map being called.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.map.

{% endraw %} -### `router.on` removed +### `router.on` supprimée -If you need to programmatically generate routes when starting up your app, you can do so by dynamically pushing definitions to a routes array. For example: +Si vous avez besoin programmatiquement de générer les routes au démarrage de votre application, vous pouvez le faire dynamiquement en ajoutant les définitions de route dans votre tableau. Par exemple : ``` js -// Normal base routes +// Base de routes statiques var routes = [ // ... ] -// Dynamically generated routes +// Routes générées dynamiquement marketingPages.forEach(function (page) { routes.push({ path: '/marketing/' + page.slug @@ -110,7 +110,7 @@ var router = new Router({ }) ``` -If you need to add new routes after the router has been instantiated, you can replace the router's matcher with a new one that includes the route you'd like to add: +Si vous avez besoin d'ajouter une nouvelle route après que le routeur soit instancié, vous pouvez remplacer l'objet de concordance des routes du routeur par un nouveau contenant la route que vous souhaitez ajouter : ``` js router.match = createMatcher( @@ -123,14 +123,14 @@ router.match = createMatcher( {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of router.on being called.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.on.

{% endraw %} -### `router.beforeEach` changed +### `router.beforeEach` changée -`router.beforeEach` now works asynchronously and takes a `next` function as its third argument. +`router.beforeEach` fonctionne maintenant de manière asynchrone et prend une fonction de rappel `next` en tant que troisième argument. ``` js router.beforeEach(function (transition) { @@ -152,20 +152,20 @@ router.beforeEach(function (to, from, next) { }) ``` -### `subRoutes` renamed +### `subRoutes` renommée -[Renamed to `children`](https://router.vuejs.org/en/essentials/nested-routes.html) for consistency within Vue and with other routing libraries. +[Renommée en `children`](https://router.vuejs.org/fr/essentials/nested-routes.html) pour plus de consistance entre Vue et les autres bibliothèques de routage. {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of the subRoutes option.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options subRoutes.

{% endraw %} -### `router.redirect` replaced +### `router.redirect` remplacée -This is now an [option on route definitions](https://router.vuejs.org/en/essentials/redirect-and-alias.html). So for example, you will update: +C'est maintenant [une option des définitions de route](https://router.vuejs.org/fr/essentials/redirect-and-alias.html). Ainsi par exemple, vous devez mettre à jour : ``` js router.redirect({ @@ -173,7 +173,7 @@ router.redirect({ }) ``` -to a definition like below in your `routes` configuration: +par une définition comme ci-dessous dans votre configuration de `routes` : ``` js { @@ -184,14 +184,14 @@ to a definition like below in your `routes` configuration: {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of router.redirect being called.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.redirect.

{% endraw %} -### `router.alias` replaced +### `router.alias` remplacée -This is now an [option on the definition for the route](https://router.vuejs.org/en/essentials/redirect-and-alias.html) you'd like to alias to. So for example, you will update: +C'est maintenant [une option des définitions de route](https://router.vuejs.org/fr/essentials/redirect-and-alias.html) que vous devrez mettre sous alias. Ainsi par exemple, vous devez mettre à jour : ``` js router.alias({ @@ -199,7 +199,7 @@ router.alias({ }) ``` -to a definition like below in your `routes` configuration: +par une définition comme ci-dessous dans votre configuration de `routes` : ``` js { @@ -209,7 +209,7 @@ to a definition like below in your `routes` configuration: } ``` -If you need multiple aliases, you can also use an array syntax: +Si vous avez besoin de plusieurs alias, vous pouvez aussi utiliser la syntaxe de tableau : ``` js alias: ['/manage', '/administer', '/administrate'] @@ -217,14 +217,14 @@ alias: ['/manage', '/administer', '/administrate'] {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of router.alias being called.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.alias.

{% endraw %} -### Arbitrary Route Properties replaced +### Propriétés de route personnalisées remplacées -Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features. So for example, if you had defined: +Les propriétés de route personnalisées doivent maintenant être imbriquées dans une nouvelle propriété meta pour éviter les conflits avec les fonctionnalités futures. Ainsi par exemple, si vous aviez défini : ``` js '/admin': { @@ -233,7 +233,7 @@ Arbitrary route properties must now be scoped under the new meta property, to av } ``` -Then you would now update it to: +Et bien vous devrez définir maintenant : ``` js { @@ -245,7 +245,7 @@ Then you would now update it to: } ``` -Then when later accessing this property on a route, you will still go through meta. For example: +Puis quand vous accéderez à cette propriété pour une route, vous pourrez toujours y accéder via `meta`. Par exemple : ``` js if (route.meta.requiresAuth) { @@ -255,20 +255,20 @@ if (route.meta.requiresAuth) { {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of arbitrary route properties not scoped under meta.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de propriétés personnalisées non imbriquées dans meta.

{% endraw %} -### [] Syntax for Arrays in Queries removed +### Syntaxe `[]` pour les tableaux dans les QueryString retirée -When passing arrays to query parameters the QueryString syntax is no longer `/foo?users[]=Tom&users[]=Jerry`, instead, the new syntax is `/foo?users=Tom&users=Jerry`. Internally, `$route.query.users` will still be an Array, but if there's only one parameter in the query: `/foo?users=Tom`, when directly accessing this route, there's no way for the router to know if we were expecting `users` to be an Array. Because of this, consider adding a computed property and replacing every reference of `$route.query.users` with it: +Quand vous passez des tableaux à des paramètres de QueryString la syntaxe `/foo?users[]=Tom&users[]=Jerry` ne fonctionne plus. À la place, la nouvelle syntaxe sera `/foo?users=Tom&users=Jerry`. En interne `$route.query.users` sera toujours un tableau, mais s'il n'y a qu'un seul paramètre dans la query `/foo?users=Tom`, quand vous accéderez à cette route, il n'y aura aucun moyen pour le routeur de savoir si nous souhaitons que `users` soit un tableau. À cause de cela, il faut ajouter une propriété calculée et remplacer toutes les références de `$route.query.users` par cela : ```javascript export default { // ... computed: { - // users will always be an array + // `users` sera toujours un tableau users () { const users = this.$route.query.users return Array.isArray(users) ? users : [users] @@ -277,102 +277,102 @@ export default { } ``` -## Route Matching +## Concordance de routes -Route matching now uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) under the hood, making it much more flexible than previously. +La concordance de routes utilise maintenant [path-to-regexp](https://github.com/pillarjs/path-to-regexp) pour fonctionner, ce qui la rend plus flexible que précédemment. -### One or More Named Parameters changed +### Un ou plusieurs paramètres nommés changés -The syntax has changed slightly, so `/category/*tags` for example, should be updated to `/category/:tags+`. +La syntaxe a quelque peu changée, ainsi `/category/*tags` par exemple, doit être mis à jour pour `/category/:tags+`. {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of the obsolete route syntax.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de syntaxe de route obsolète.

{% endraw %} -## Links +## Liens -### `v-link` replaced +### `v-link` remplacée -The `v-link` directive has been replaced with a new [`` component](https://router.vuejs.org/en/api/router-link.html), as this sort of job is now solely the responsibility of components in Vue 2. That means whenever wherever you have a link like this: +La directive `v-link` a été remplacée par le [composant ``](https://router.vuejs.org/fr/api/router-link.html) car ce type de travail relève du domaine des composants dans Vue 2. Cela signifie que chaque fois que vous avez un lien comme celui-ci : ``` html -About +À propos ``` -You'll need to update it like this: +Vous devez le mettre à jour ainsi : ``` html -About +À propos ``` -Note that `target="_blank"` is not supported on ``, so if you need to open a link in a new tab, you have to use `` instead. +Notez que `target="_blank"` n'est pas supporté sur `` donc si vous avez besoin d'ouvrir un lien dans un nouvel onglet, vous devez utiliser `` à la place. {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of the v-link directive.

+

Comment procéder ?

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de directive v-link.

{% endraw %} -### `v-link-active` replaced +### `v-link-active` remplacée -The `v-link-active` directive has also been replaced by the `tag` attribute on [the `` component](https://router.vuejs.org/en/api/router-link.html). So for example, you'll update this: +La directive `v-link-active` a été remplacée par un attribut de balise sur [le composant ``](https://router.vuejs.org/fr/api/router-link.html). Donc par exemple, vous devez mettre à jour ceci : ``` html
  • - About + À propos
    • ``` -to this: +par ceci : ``` html - About + À propos ``` -The `` will be the actual link (and will get the correct href), but the active class will be applied to the outer `
  • `. +Le `` sera dans ce cas le lien (et amènera sur l'adresse correcte), mais la classe active sera appliquée sur le `
  • ` extérieur. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the v-link-active directive.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de directive v-link-active.

    {% endraw %} -## Programmatic Navigation +## Navigation par programmation -### `router.go` changed +### `router.go` changée -For consistency with the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API), `router.go` is now only used for [back/forward navigation](https://router.vuejs.org/en/essentials/navigation.html#routergon), while [`router.push`](https://router.vuejs.org/en/essentials/navigation.html#routerpushlocation) is used to navigate to a specific page. +Pour plus de consistance avec l'[API HTML5 History](https://developer.mozilla.org/fr-FR/docs/Web/API/History_API) `router.go` est maintenant utilisé pour [la navigation en arrière ou en avant](https://router.vuejs.org/fr/essentials/navigation.html#routergon) alors que [`router.push`](https://router.vuejs.org/fr/essentials/navigation.html#routerpushlocation) est utilisé pour naviguer vers une page spécifique. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of router.go being used where router.push should be used instead.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'utilisation de router.go là où router.push devrait être utilisé.

    {% endraw %} -## Router Options: Modes +## Options de Router : Modes -### `hashbang: false` removed +### `hashbang: false` supprimée -Hashbangs are no longer required for Google to crawl a URL, so they are no longer the default (or even an option) for the hash strategy. +Les hashbangs ne sont plus requis par Google pour le parcours d'URL, il ne sont donc plus l’utilisation par défaut (ou même une option) pour la stratégie de hash. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the hashbang: false option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options hashbang: false.

    {% endraw %} -### `history: true` replaced +### `history: true` replacée -All routing mode options have been condensed into a single [`mode` option](https://router.vuejs.org/en/api/options.html#mode). Update: +Tous les options de mode ont été condensées dans un seule [option `mode`](https://router.vuejs.org/fr/api/options.html#mode). Mettez à jour : ``` js var router = new VueRouter({ @@ -380,7 +380,7 @@ var router = new VueRouter({ }) ``` -to: +avec : ``` js var router = new VueRouter({ @@ -390,14 +390,14 @@ var router = new VueRouter({ {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the history: true option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options history: true.

    {% endraw %} -### `abstract: true` replaced +### `abstract: true` remplacée -All routing mode options have been condensed into a single [`mode` option](https://router.vuejs.org/en/api/options.html#mode). Update: +Tous les options de mode ont été condensées dans un seule [option `mode`](https://router.vuejs.org/fr/api/options.html#mode). Mettez à jour : ``` js var router = new VueRouter({ @@ -405,7 +405,7 @@ var router = new VueRouter({ }) ``` -to: +avec : ``` js var router = new VueRouter({ @@ -415,22 +415,22 @@ var router = new VueRouter({ {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the abstract: true option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options abstract: true.

    {% endraw %} -## Route Options: Misc +## Options de Route -### `saveScrollPosition` replaced +### `saveScrollPosition` remplacée -This has been replaced with a [`scrollBehavior` option](https://router.vuejs.org/en/advanced/scroll-behavior.html) that accepts a function, so that the scroll behavior is completely customizable - even per route. This opens many new possibilities, but to simply replicate the old behavior of: +Ceci a été remplacé par l'[option `scrollBehavior`](https://router.vuejs.org/fr/advanced/scroll-behavior.html) qui accepte une fonction, ainsi le comportement de défilement est complètement personnalisable, même par route. Ceci ouvre de nouvelles possibilités, mais pour simplement reproduire les anciens comportements : ``` js saveScrollPosition: true ``` -You can replace it with: +vous pouvez remplacer ça par : ``` js scrollBehavior: function (to, from, savedPosition) { @@ -440,104 +440,104 @@ scrollBehavior: function (to, from, savedPosition) { {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the saveScrollPosition: true option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options saveScrollPosition: true.

    {% endraw %} -### `root` renamed +### `root` renommée -Renamed to `base` for consistency with [the HTML `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base). +Renommée par `base` pour plus de consistance avec l'[élément HTML ``](https://developer.mozilla.org/fr-FR/docs/Web/HTML/Element/base). {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the root option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options root.

    {% endraw %} -### `transitionOnLoad` removed +### `transitionOnLoad` supprimée -This option is no longer necessary now that Vue's transition system has explicit [`appear` transition control](transitions.html#Transitions-on-Initial-Render). +Cette option n'est plus nécessaire maintenant que le système de transition de Vue a un [contrôle de transition `appear`](transitions.html#Transitions-sur-le-rendu-initial) explicite. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the transitionOnLoad: true option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options transitionOnLoad: true.

    {% endraw %} -### `suppressTransitionError` removed +### `suppressTransitionError` supprimée -Removed due to hooks simplification. If you really must suppress transition errors, you can use [`try`...`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) instead. +Supprimée grâce à une simplification des hooks. Si vous devez réellement supprimer les erreurs de transition, vous pouvez utiliser [`try`...`catch`](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Statements/try...catch) à la place. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the suppressTransitionError: true option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options suppressTransitionError: true.

    {% endraw %} -## Route Hooks +## Hooks de Route -### `activate` replaced +### `activate` remplacée -Use [`beforeRouteEnter`](https://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards) in the component instead. +Utilisez [`beforeRouteEnter`](https://router.vuejs.org/fr/advanced/navigation-guards.html#interception-par-composant) dans le composant à la place. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the beforeRouteEnter hook.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook beforeRouteEnter.

    {% endraw %} -### `canActivate` replaced +### `canActivate` remplacée -Use [`beforeEnter`](https://router.vuejs.org/en/advanced/navigation-guards.html#perroute-guard) in the route instead. +Utilisez [`beforeEnter`](https://router.vuejs.org/fr/advanced/navigation-guards.html#interception-par-route) dans le composant à la place. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the canActivate hook.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook canActivate.

    {% endraw %} -### `deactivate` removed +### `deactivate` remplacée -Use the component's [`beforeDestroy`](../api/#beforeDestroy) or [`destroyed`](../api/#destroyed) hooks instead. +Utilisez le [`beforeDestroy`](../api/#beforeDestroy) du composant ou le hook [`destroyed`](../api/#destroyed) à la place. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the deactivate hook.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook deactivate.

    {% endraw %} -### `canDeactivate` replaced +### `canDeactivate` remplacée -Use [`beforeRouteLeave`](https://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards) in the component instead. +Utilisez [`beforeRouteLeave`](https://router.vuejs.org/fr/advanced/navigation-guards.html#interception-par-composant) dans le composant à la place. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the canDeactivate hook.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook canDeactivate.

    {% endraw %} -### `canReuse: false` removed +### `canReuse: false` remplacée -There's no longer a use case for this in the new Vue Router. +Il n'existe plus de cas comme celui-ci dans le nouveau Vue Router. {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the canReuse: false option.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'option canReuse: false.

    {% endraw %} -### `data` replaced +### `data` remplacée -The `$route` property is now reactive, so you can just use a watcher to react to route changes, like this: +La propriété `$route` est maintenant réactive donc vous pouvez juste utiliser un observateur pour réagir au changement de route comme ceci : ``` js watch: { @@ -552,14 +552,14 @@ methods: { {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the data hook.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook data.

    {% endraw %} -### `$loadingRouteData` removed +### `$loadingRouteData` supprimée -Define your own property (e.g. `isLoading`), then update the loading state in a watcher on the route. For example, if fetching data with [axios](https://github.com/mzabriskie/axios): +Définissez votre propre propriété (par ex . `isLoading`) quand vous mettez à jour l'état de chargement d'un observateur sur une route. Par exemple, si vous récupérez les données avec [axios](https://github.com/mzabriskie/axios) : ``` js data: function () { @@ -594,7 +594,7 @@ methods: { {% raw %}
    -

    Upgrade Path

    -

    Run the migration helper on your codebase to find examples of the $loadingRouteData meta property.

    +

    Comment procéder ?

    +

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de propriété meta $loadingRouteData.

    {% endraw %} diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 366d250ddf..a51155e79d 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -38,7 +38,7 @@ En ce qui concerne Vuex, la version 0.8 est compatible avec Vue 2, vous n'êtes ## Templates -### Instances fragmentées retirées +### Instances fragmentées supprimées Tous les composants doivent avoir seulement un seul élément racine. Les instances fragmentées ne sont plus permises. Si vous aviez un template comme ceci : @@ -65,7 +65,7 @@ Il est recommandé d'entourer simplement le contenu complet dans un nouvel élé ## Hooks de cycle de vie -### `beforeCompile` retiré +### `beforeCompile` supprimé Utilisez le hook `created` à la place. @@ -87,7 +87,7 @@ Utilisez le hook `mounted` à la place. {% endraw %} -### `attached` retiré +### `attached` supprimé Utilisez une vérification du DOM dans les autres hooks. Par exemple, remplacez : @@ -114,7 +114,7 @@ mounted: function () { {% endraw %} -### `detached` retiré +### `detached` supprimé Utilisez une vérification du DOM dans les autres hooks. Par exemple, remplacez : @@ -195,7 +195,7 @@ Quand vous utilisez une `key`, l'ordre des arguments pour les objets était `(ke {% endraw %} -### `$index` et `$key` retirés +### `$index` et `$key` supprimés Les variables implicites `$index` et `$key` ont été enlevées à la faveur de leur définition explicite dans `v-for`. Ceci rend le code plus simple à lire pour les développeurs moins expérimentés avec Vue. Il en résulte également des comportements plus prévisibles dans les cas de boucles imbriquées. @@ -240,7 +240,7 @@ Précédemment, `v-for="number in 10"` devait avoir `number` qui commençait à ## Props -### Option de prop `coerce` retirée +### Option de prop `coerce` supprimée Si vous voulez coercer une prop, mettez en place une propriété calculée basée dessus. Par exemple au lieu de : @@ -284,7 +284,7 @@ Cela a plusieurs avantages : {% endraw %} -### Option de prop `twoWay` retirée +### Option de prop `twoWay` supprimée Les props sont maintenant toujours unidirectionnelles et descendantes. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement émettre un évènement au lieu de créer une liaison implicite. Pour plus d'informations, consultez : @@ -299,7 +299,7 @@ Les props sont maintenant toujours unidirectionnelles et descendantes. Pour prod {% endraw %} -### Modificateur `.once` et `.sync` de `v-bind` retiré +### Modificateur `.once` et `.sync` de `v-bind` supprimé Les props sont maintenant toujours unidirectionnelles et descendantes. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement émettre un évènement au lieu de créer une liaison implicite. Pour plus d'informations, consultez : @@ -411,7 +411,7 @@ Quand vous utilisez un composant, `v-on` n'écoutera que les évènements `$emit {% endraw %} -### Paramètre d'attribut `debounce` pour `v-model` retiré +### Paramètre d'attribut `debounce` pour `v-model` supprimé Une fonction de rétention (« debounce ») est utilisée pour limiter la fréquence d'exécution des requêtes Ajax et des autres opérations coûteuses. L'attribut `debounce` de Vue pour le paramètre `v-model` est taillé pour des cas simples, mais en fait il fait la rétention des __mises à jour d'état__ plutôt que des opérations lourdes elles-même. C'est une différence subtile, mais cela amène des limitations quand l'application grandit. @@ -547,7 +547,7 @@ Nous utiliserons : {% endraw %} -### Attribut `value` avec `v-model` retiré +### Attribut `value` avec `v-model` supprimé `v-model` ne se préoccupe plus de la valeur initiale de l'attribut `value`. Pour plus de prédictibilité, il utilisera toujours la donnée utilisée dans l'instance de Vue comme source de vérité. @@ -582,7 +582,7 @@ vous devrez vous assurer que la valeur initiale pour `text` est `"hello world"`. {% endraw %} -### Itération de valeur primitive avec `v-model` et `v-for` retiré +### Itération de valeur primitive avec `v-model` et `v-for` supprimé Les cas de figure comme celui-ci ne fonctionnent plus : @@ -613,7 +613,7 @@ Comme vous pouvez le voir, la liaison bidirectionnelle de `v-model` n'a plus de {% endraw %} -### `v-bind:style` avec la syntaxe objet et `!important` retiré +### `v-bind:style` avec la syntaxe objet et `!important` supprimé Ceci ne fonctionne plus : @@ -661,7 +661,7 @@ D'un autre côté, `$refs` est conçu avant tout pour un accès programmatique e {% endraw %} -### `v-else` avec `v-show` retiré +### `v-else` avec `v-show` supprimé `v-else` n'est plus supporté avec `v-show`. Utilisez `v-if` avec une expression négative à la place. Par exemple, au lieu de : @@ -703,7 +703,7 @@ Heureusement, puisque les nouvelles directives sont plus simples, vous pouvez le {% endraw %} -### Modificateur de directive `.literal` retiré +### Modificateur de directive `.literal` supprimé Le modificateur `.literal` a été supprimé, la même chose peut être facilement réalisée en fournissant une chaîne de caractères littérale en tant que valeur. @@ -750,7 +750,7 @@ Avec le nouveau système de transition, vous pouvez maintenant [utiliser les com {% endraw %} -### Attribut de transition `stagger` retiré +### Attribut de transition `stagger` supprimé Si vous avez besoin d'écheloner les transitions, vous pouvez contrôler le timing en accédant ou changeant une `data-index` ou attribut similaire sur un élément. Consultez [un exemple ici](transitions.html#Echelonnage-des-transitions-de-liste). @@ -763,7 +763,7 @@ Si vous avez besoin d'écheloner les transitions, vous pouvez contrôler le timi ## Évènements -### Option `events` retirée +### Option `events` supprimée L'option `events` a été retirée. Les gestionnaires d'évènements doivent maintenant être abonnés dans le hook `created` à la place. Consultez [le guide `$dispatch` et `$broadcast`](#dispatch-et-broadcast-remplaces) pour plus de détails. @@ -868,7 +868,7 @@ Ce modèle peut servir de remplacement à `$dispatch` et `$broadcast` dans des s ## Filtres -### Filtres en dehors des interpolations de texte retiré +### Filtres en dehors des interpolations de texte supprimé Les filtres peuvent maintenant seulement être utilisés à l'intérieur des interpolations de texte (Ouverture et fermeture `{% raw %}{{ }}{% endraw %}`). Avant, il était possible d'utiliser ses filtres sur `v-model`, `v-on`, etc mais cela menait à plus de complexité et d'inconvénient. Pour filtrer les listes sur `v-for`, il est plus logique de déplacer cela dans la partie propriétés calculées du JavaScript, ainsi cela peut-être ré-utilisé à travers votre composant. @@ -1022,7 +1022,7 @@ Nous entourons les arguments avec des parenthèses et les délimitons avec des v {% endraw %} -### Filtres de texte intégré retirés +### Filtres de texte intégré supprimés Bien que les filtres dans les interpolations de texte soit toujours autorisés, tous les filtres ont été retirés. À la place, nous recommandons d'utiliser des bibliothèques spéciales pour résoudre les problèmes dans chaque domaine (par ex. [`date-fns`](https://date-fns.org/) pour le format des dates et [`accounting`](http://openexchangerates.github.io/accounting.js/) pour le format des devises). @@ -1127,7 +1127,7 @@ Vous pouvez remarquer que : ## Slots -### Slots dupliqués retirés +### Slots dupliqués supprimés Il n'est plus possible d'avoir deux `` avec le même nom dans le même template. Quand le rendu d'un slot est fait, il est réputé déjà rendu et son rendu ne doit plus être refait dans le même arbre de rendu. Si vous devez faire le rendu d'un même contenu, à des endroits différents, passez le contenu en tant que prop. @@ -1138,7 +1138,7 @@ Il n'est plus possible d'avoir deux `` avec le même nom dans le même tem {% endraw %} -### Attribut de stylisation `slot` retiré +### Attribut de stylisation `slot` supprimé Le contenu inséré via un `` nommé ne préservera plus l'attribut `slot`. Utilisez un élément englobant pour le styliser, ou pour des cas avancés, modifiez le contenu inséré programmatiquement en utilisant des [fonctions de rendu](render-function.html). @@ -1191,7 +1191,7 @@ Quand vous les utilisez avec ``, assurez-vous de les imbriquer ainsi ## Interpolation -### Interpolation dans les attributs retirée +### Interpolation dans les attributs supprimée L'interpolation dans les attributs ne fonctionne plus. Par exemple : @@ -1226,7 +1226,7 @@ computed: { {% endraw %} -### Interpolation HTML retirée +### Interpolation HTML supprimée L'interpolations HTML (`{% raw %}{{{ foo }}}{% endraw %}`) a été retirée. La [directive `v-html`](../api/#v-html) est maintenant préférée. @@ -1285,7 +1285,7 @@ Si vous aviez précédemment relié `vm.$watch` à quelque chose du DOM après l {% endraw %} -### `Array.prototype.$set` retiré +### `Array.prototype.$set` supprimé Utilisez `Vue.set` à la place. @@ -1296,7 +1296,7 @@ Utilisez `Vue.set` à la place. {% endraw %} -### `Array.prototype.$remove` retiré +### `Array.prototype.$remove` supprimé Utilisez `Array.prototype.splice` à la place. Par exemple : @@ -1326,7 +1326,7 @@ methods: { {% endraw %} -### `Vue.set` et `Vue.delete` sur les instances de Vue retiré +### `Vue.set` et `Vue.delete` sur les instances de Vue supprimé `Vue.set` et `Vue.delete` ne fonctionnent plus avec les instances de Vue. Il est maintenant obligatoire de déclarer toutes les propriétés de haut niveau en tant que propriétés réactives dans l'option `data`. Si vous voulez supprimer des propriétés d'une instance de Vue ou des `$data`, mettez les à `null`. @@ -1337,7 +1337,7 @@ methods: { {% endraw %} -### Remplacement de `vm.$data` retiré +### Remplacement de `vm.$data` supprimé Il est maintenant interdit de remplacer l'objet `$data` d'une instance racine de Vue. Cela permet d'éviter les effets de bord dans le système de réactivité et permet a l'état du composant d'être plus prévisible (spécialement avec les systèmes de vérification de type). @@ -1348,7 +1348,7 @@ Il est maintenant interdit de remplacer l'objet `$data` d'une instance racine de {% endraw %} -### `vm.$get` retiré +### `vm.$get` supprimé Retrouvez simplement la donnée réactive. @@ -1361,7 +1361,7 @@ Retrouvez simplement la donnée réactive. ## Méthodes d'intance centrés sur le DOM -### `vm.$appendTo` retiré +### `vm.$appendTo` supprimé Utilisez l'API native du DOM : @@ -1376,7 +1376,7 @@ myElement.appendChild(vm.$el) {% endraw %} -### `vm.$before` retiré +### `vm.$before` supprimé Utilisez l'API native du DOM : @@ -1391,7 +1391,7 @@ myElement.parentNode.insertBefore(vm.$el, myElement) {% endraw %} -### `vm.$after` retiré +### `vm.$after` supprimé Utilisez l'API native du DOM : @@ -1412,7 +1412,7 @@ myElement.parentNode.appendChild(vm.$el) {% endraw %} -### `vm.$remove` retiré +### `vm.$remove` supprimé Utilisez l'API native du DOM : @@ -1429,7 +1429,7 @@ vm.$el.remove() ## Meta méthodes d'instance -### `vm.$eval` retiré +### `vm.$eval` supprimé Pas réellement utile. Si vous avez des difficultés liés à cette fonctionnalité et que vous n'êtes pas certain de savoir comment faire autrement, vous pouvez poster sur [le forum](https://forum.vuejs.org/c/french) et partagez vos idées. @@ -1440,7 +1440,7 @@ Pas réellement utile. Si vous avez des difficultés liés à cette fonctionnali {% endraw %} -### `vm.$interpolate` retiré +### `vm.$interpolate` supprimé Pas réellement utile. Si vous avez des difficultés liées à cette fonctionnalité et que vous n'êtes pas certain de savoir comment faire autrement, vous pouvez poster sur [le forum](https://forum.vuejs.org/c/french) et partager vos idées. @@ -1451,7 +1451,7 @@ Pas réellement utile. Si vous avez des difficultés liées à cette fonctionnal {% endraw %} -### `vm.$log` retiré +### `vm.$log` supprimé Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une expérience de débogage optimale. @@ -1464,7 +1464,7 @@ Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une ex ## Instance DOM Options -### `replace: false` retiré +### `replace: false` supprimé Les composants remplacent maintenant les éléments sur lesquels ils sont liés. Pour simuler le comportement de `replace: false`, vous devez encadrer votre composant racine avec un élément similaire à celui que vous remplacez. Par exemple : @@ -1499,7 +1499,7 @@ new Vue({ ## Configuration globale -### `Vue.config.debug` retirée +### `Vue.config.debug` supprimée N'est plus nécessaire car les avertissements se trouvent dans la pile des traces par défaut maintenant. @@ -1510,7 +1510,7 @@ N'est plus nécessaire car les avertissements se trouvent dans la pile des trace {% endraw %} -### `Vue.config.async` retirée +### `Vue.config.async` supprimée Async est maintenant requis pour les performances de rendu. @@ -1532,7 +1532,7 @@ Cela a été retravaillé en temps qu'[option de composant](../api/#delimiters). {% endraw %} -### `Vue.config.unsafeDelimiters` retirée +### `Vue.config.unsafeDelimiters` supprimée L'interpolation HTML a été [retirée en faveur de `v-html`](#Interpolation-HTML-retirée). @@ -1545,7 +1545,7 @@ L'interpolation HTML a été [retirée en faveur de `v-html`](#Interpolation-HTM ## API globale -### `Vue.extend` avec `el` retirée +### `Vue.extend` avec `el` supprimée L'option `el` ne peut plus être utilisée avec `Vue.extend`. Elle est seulement valide en tant qu'option de création d'instance. @@ -1556,7 +1556,7 @@ L'option `el` ne peut plus être utilisée avec `Vue.extend`. Elle est seulement {% endraw %} -### `Vue.elementDirective` retirée +### `Vue.elementDirective` supprimée Utilisez des composants à la place. @@ -1567,7 +1567,7 @@ Utilisez des composants à la place. {% endraw %} -### `Vue.partial` retirée +### `Vue.partial` supprimée Les partiels ont été retirés en faveur d'un flux de donnée plus explicite entre les composants, en utilisant les props. Partout où vous utilisiez des partiels dans des zones de performances critiques, la recommandation est simplement d'utiliser un [composant normal](components.html) à la place. Au cas où vous liez dynamiquement le `name` du partiel, vous pouvez utiliser un [composant dynamique](components.html#Composants-dynamiques).