You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/guide/components-dynamic-async.md
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Composants dynamiques & async
2
+
title: Composants dynamiques et asynchrones
3
3
type: guide
4
4
order: 105
5
5
---
@@ -199,7 +199,7 @@ Désormais, l'onglet _Posts_ conserve son état (le post sélectionné) même lo
199
199
200
200
Pour plus de détails sur `<keep-alive>`, consultez la [référence API](../api/#keep-alive).
201
201
202
-
## Composants async
202
+
## Composants asynchrones
203
203
204
204
Dans de grosses applications, nous pouvons avoir besoin de diviser l'application en morceaux plus petits et charger un composant depuis le serveur seulement lorsque celui-ci est requis. Pour rendre cela plus facile, Vue vous permet de définir un composant en tant que fonction usine qui va résoudre de façon asynchrone la définition de votre composant. Vue déclenchera la fonction usine seulement lorsque le rendu du composant est nécessaire, et mettra en cache le résultat pour les futurs nouveaux rendus. Par exemple :
205
205
@@ -214,23 +214,23 @@ Vue.component('exemple-async', function (resolve, reject) {
214
214
})
215
215
```
216
216
217
-
Comme vous pouvez le voir, la fonction usine reçoit en paramètre `resolve`, une fonction de rappel (*callback*) qui sera appelée lorsque vous aurez récupéré la définition du composant depuis le serveur. Vous pouvez également appeler `reject(raison)` pour indiquer que le chargement a échoué pour une certaine raison. Le `setTimeout` est là en guise de démonstration ; à vous de décider comment vous souhaitez récupérer le composant. Une approche recommandée est d'utiliser les composants async conjointement avec la [fonctionnalité de découpage de code de Webpack](https://webpack.js.org/guides/code-splitting/):
217
+
Comme vous pouvez le voir, la fonction usine reçoit en paramètre `resolve`, une fonction de rappel (*callback*) qui sera appelée lorsque vous aurez récupéré la définition du composant depuis le serveur. Vous pouvez également appeler `reject(raison)` pour indiquer que le chargement a échoué pour une certaine raison. Le `setTimeout` est là en guise de démonstration ; à vous de décider comment vous souhaitez récupérer le composant. Une approche recommandée est d'utiliser les composants asynchrones conjointement avec la [fonctionnalité de découpage de code de webpack](https://webpack.js.org/guides/code-splitting/):
218
218
219
219
```js
220
220
Vue.component('exemple-webpack-async', function (resolve) {
221
-
// Cette syntaxe spéciale `require` indique à Webpack de
221
+
// Cette syntaxe spéciale `require` indique à webpack de
222
222
// diviser automatiquement votre code en sortie en paquets
223
223
// qui seront chargés via des requêtes AJAX.
224
224
require(['./mon-composant-async'], resolve)
225
225
})
226
226
```
227
227
228
-
Vous pouvez également retourner une `Promise` dans la fonction usine, ainsi avec Webpack 2 et la syntaxe ES2015 vous pourrez écrire :
228
+
Vous pouvez également retourner une `Promise` dans la fonction usine, ainsi avec webpack 2 et la syntaxe ES2015 vous pourrez écrire :
229
229
230
230
```js
231
231
Vue.component(
232
232
'exemple-webpack-async',
233
-
// La fonction `import` retourne une Promise.
233
+
// La fonction `import` retourne une `Promise`.
234
234
() =>import('./mon-composant-async')
235
235
)
236
236
```
@@ -246,17 +246,17 @@ new Vue({
246
246
})
247
247
```
248
248
249
-
<pclass="tip">Si vous êtes un utilisateur de <strong>Browserify</strong> et souhaitez utiliser les composants async, son créateur a malheureusement [été très clair](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) sur le fait que le chargement asynchrone n'est pas quelque-chose que Browserify supportera un jour. Officiellement du moins. La communauté Browserify a trouvé [quelques solutions de contournement](https://github.com/vuejs/vuejs.org/issues/620), qui peuvent s'avérer utiles pour les applications complexes existantes. Pour tous les autres scénarios, nous recommandons d'utiliser Webpack pour un support natif et de première classe de l'asynchrone.</p>
249
+
<pclass="tip">Si vous êtes un utilisateur de <strong>Browserify</strong> et souhaitez utiliser les composants asynchrones, son créateur a malheureusement [été très clair](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) sur le fait que le chargement asynchrone n'est pas quelque-chose que Browserify supportera un jour. Officiellement du moins. La communauté Browserify a trouvé [quelques solutions de contournement](https://github.com/vuejs/vuejs.org/issues/620), qui peuvent s'avérer utiles pour les applications complexes existantes. Pour tous les autres scénarios, nous recommandons d'utiliser webpack pour un support natif et de première classe de l'asynchrone.</p>
250
250
251
251
### Gérer l'état de chargement
252
252
253
253
> Nouveauté de la 2.3.0+
254
254
255
-
La fabrique de composants async peut aussi retourner un objet avec le format suivant :
255
+
La fabrique de composants asynchrones peut aussi retourner un objet avec le format suivant :
256
256
257
257
```js
258
258
constAsyncComponent= () => ({
259
-
// Le composant à charger (doit être une Promise)
259
+
// Le composant à charger (doit être une `Promise`)
260
260
component:import('./MonComposant.vue'),
261
261
// Un composant à utiliser pendant que le composant asynchrone se charge
0 commit comments