Skip to content

Commit 03d548d

Browse files
committed
Correction d'après les remarques de sylvainpolletvillard
Respect Eslint de Vue
1 parent 2c483ae commit 03d548d

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

src/v2/guide/computed.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ order: 5
66

77
## Propriétés calculées
88

9-
Les expressions dans le template sont très pratiques, mais elles sont uniquement destinées pour des opérations simples. Mettre trop de logique dans vos templates peut les rendre trop verbeux et difficiles à maintenir. Par exemple :
9+
Les expressions dans le template sont très pratiques, mais elles sont uniquement destinées à des opérations simples. Mettre trop de logique dans vos templates peut les rendre trop verbeux et difficiles à maintenir. Par exemple :
1010

1111
``` html
1212
<div id="example">
1313
{{ message.split('').reverse().join('') }}
1414
</div>
1515
```
1616

17-
À cet endroit, le template n'est ni simple, ni déclaratif. Vous devez le regarder pendant une seconde avant de réaliser qu'il affiche `message` dans le sens inverse. Le problème s'aggrave lorsque vous souhaitez inclure le message inversé plusieurs fois dans votre template.
17+
À ce stade, le template n'est ni simple, ni déclaratif. Vous devez le regarder pendant une seconde avant de réaliser qu'il affiche `message` dans le sens inverse. Le problème s'aggrave lorsque vous souhaitez inclure le message inversé plusieurs fois dans votre template.
1818

19-
C'est pourquoi vous devriez utiliser des **propriétés calculées** pour des logiques complexes.
19+
C'est pourquoi vous devriez utiliser des **propriétés calculées** pour toute logique complexe.
2020

2121
### Exemple basique
2222

@@ -75,7 +75,7 @@ console.log(vm.reversedMessage) // -> 'riover uA'
7575

7676
Vous pouvez ouvrir la console et jouer vous-même avec l'exemple de vm. La valeur de `vm.reversedMessage` dépend toujours de la valeur de `vm.message`.
7777

78-
Vous pouvez lier des données aux propriétés calculées dans les templates comme une propriété normale. Vue est au courant que `vm.reversedMessage` dépend de `vm.message`, donc il mettra à jour toutes les liaisons qui dépendent de `vm.reversedMessage` lorsque `vm.message` changera. Et ce qui est encore mieux c'est que nous avons crée cette relation de dépendance de façon déclarative : la fonction de l'accesseur calculé n'a pas d'effets secondaires, ce qui la rend facile à tester et à raisonner.
78+
Vous pouvez lier des données aux propriétés calculées dans les templates comme une propriété normale. Vue est au courant que `vm.reversedMessage` dépend de `vm.message`, donc il mettra à jour toutes les liaisons qui dépendent de `vm.reversedMessage` lorsque `vm.message` changera. Et le mieux dans tout cela est que nous avons crée cette relation de dépendance de façon déclarative : la fonction de l'accesseur calculé n'a pas d'effets secondaires, ce qui la rend facile à tester et à raisonner.
7979

8080
### Mise en cache dans `computed` vs `methods`
8181

@@ -94,7 +94,7 @@ methods: {
9494
}
9595
```
9696

97-
Au lieu d'une propriété calculée, nous pouvons définir à la place la même fonction dans une méthode. Pour le résultat final, les deux approches sont en effet exactement les mêmes. Cependant, la différence est que **les propriétés déclarées dans `computed` sont mis en cache basées sur leurs dépendances.** Une propriété calculée sera réévaluée uniquement quand certaines de ses dépendances auront changé. Cela signifie que tant que `message` n'a pas changé, les multiples accès à la propriété calculée `reversedMessage` retourneront immédiatement le résultat précédemment calculé sans avoir à relancer l'exécution de la fonction.
97+
Au lieu d'une propriété calculée, nous pouvons définir la même fonction en tant que méthode. Pour le résultat final, les deux approches sont en effet exactement les mêmes. Cependant, la différence est que **les propriétés déclarées dans `computed` sont mises en cache selon leurs dépendances.** Une propriété calculée sera réévaluée uniquement quand certaines de ses dépendances auront changé. Cela signifie que tant que `message` n'a pas changé, les multiples accès à la propriété calculée `reversedMessage` retourneront immédiatement le résultat précédemment calculé sans avoir à réexécuter la fonction.
9898

9999
Cela signifie également que la propriété calculée suivante ne sera jamais mise à jour, parce que `Date.now()` n'est pas une dépendance réactive :
100100

@@ -108,11 +108,11 @@ computed: {
108108

109109
En comparaison, une invocation de méthode exécutera **toujours** la fonction à chaque fois que se produira un re-déclenchement du rendu.
110110

111-
Pourquoi avons-nous besoin de mettre en cache ? Imaginez que nous avons une propriété calculée couteuse **A**, qui exige une boucle dans un énorme tableau et qui fait beaucoup de calculs. Alors nous pouvons avoir d’autres propriétés calculées qui dépendent à leur tour de **A**. Sans la mise en cache, nous exécuterions l'accesseur de **A** autant de fois que nécessaire ! Dans les cas où vous ne souhaitez pas la mise en cache, utilisez une méthode à la place.
111+
Pourquoi avons-nous besoin de mettre en cache ? Imaginez que nous avons une propriété calculée coûteuse **A**, qui exige une boucle dans un énorme tableau et qui fait beaucoup de calculs. Alors nous pouvons avoir d’autres propriétés calculées qui dépendent à leur tour de **A**. Sans la mise en cache, nous exécuterions l'accesseur de **A** autant de fois que nécessaire ! Dans les cas où vous ne souhaitez pas la mise en cache, utilisez une méthode à la place.
112112

113113
### Propriétés calculées vs observées
114114

115-
Vue fournit vraiment une façon plus générique d'observer et de réagir aux changements de données sur une instance de Vue : **les propriétés watch**. Quand vous avez des données quil faut changer basées sur d’autres données, il est tentant d’abuser de `watch` (surtout si vous venez du monde d'AngularJS). Toutefois, il est souvent préférable d’utiliser une propriété calculée et pas une fonction de retour impérative de `watch`. Considérez cet exemple :
115+
Vue fournit une façon plus générique d'observer et de réagir aux changements de données sur une instance de Vue : **les propriétés watch**. Quand vous avez des données qu'il faut changer selon d'autres données, il est tentant d’abuser de `watch` (surtout si vous venez du monde d'AngularJS). Toutefois, il est souvent préférable d’utiliser une propriété calculée et pas et non une fonction de retour impérative comme `watch`. Considérez cet exemple :
116116

117117
``` html
118118
<div id="demo">{{ fullName }}</div>
@@ -183,7 +183,7 @@ Maintenant, lorsque vous exécutez `vm.fullName = 'John Doe'`, le mutateur sera
183183

184184
## Observateurs
185185

186-
Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, parfois un observateur personnalisé est nécessaire. C'est pour cela que Vue fournit une façon plus générique de réagir aux changements de données à travers l'option `watch`. Ceci est très utile lorsque vous souhaitez exécuter des opérations asynchrones ou coûteuses en réponse aux données changeantes.
186+
Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, parfois un observateur personnalisé est nécessaire. C'est pour cela que Vue fournit une façon plus générique de réagir aux changements de données à travers l'option `watch`. Ceci est très utile lorsque vous souhaitez exécuter des opérations asynchrones ou coûteuses en réponse à des données changeantes.
187187

188188
Par exemple :
189189

@@ -200,7 +200,7 @@ Par exemple :
200200
``` html
201201
<!-- Puisqu'il y a déjà un riche écosystème de bibliothèques ajax -->
202202
<!-- et de collections de méthodes d'utilité générale, en ne les -->
203-
<!-- réinventant pas, la base de Vue peut rester petit. Cela vous -->
203+
<!-- réinventant pas, le noyau de Vue peut rester petit. Cela vous -->
204204
<!-- donne aussi la liberté d’utiliser tout ce qui vous est familier. -->
205205
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
206206
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
@@ -214,7 +214,7 @@ var watchExampleVM = new Vue({
214214
watch: {
215215
// à chaque fois que la question change, cette fonction s'exécutera
216216
question: function (newQuestion) {
217-
this.answer = 'J\'attends que vous arrêtiez de taper ...'
217+
this.answer = "J'attends que vous arrêtiez de taper..."
218218
this.getAnswer()
219219
}
220220
},
@@ -229,7 +229,7 @@ var watchExampleVM = new Vue({
229229
getAnswer: _.debounce(
230230
function () {
231231
if (this.question.indexOf('?') === -1) {
232-
this.answer = 'Les questions contiennent généralement un point d\'interrogation. ;-)'
232+
this.answer = "Les questions contiennent généralement un point d'interrogation. ;-)"
233233
return
234234
}
235235
this.answer = 'Je réfléchis...'
@@ -239,11 +239,11 @@ var watchExampleVM = new Vue({
239239
vm.answer = _.capitalize(response.data.answer)
240240
})
241241
.catch(function (error) {
242-
vm.answer = 'Erreur ! Impossible d\'accéder à l\'API.' + error
242+
vm.answer = "Erreur ! Impossible d'accéder à l'API." + error
243243
})
244244
},
245-
// This is the number of milliseconds we wait for the
246-
// user to stop typing.
245+
// C'est le nombre de millisecondes que nous attendons
246+
// pour que l’utilisateur arrête de taper.
247247
500
248248
)
249249
}
@@ -272,7 +272,7 @@ var watchExampleVM = new Vue({
272272
},
273273
watch: {
274274
question: function (newQuestion) {
275-
this.answer = 'J\'attends que vous arrêtiez de taper ...'
275+
this.answer = "J'attends que vous arrêtiez de taper..."
276276
this.getAnswer()
277277
}
278278
},
@@ -281,7 +281,7 @@ var watchExampleVM = new Vue({
281281
function () {
282282
var vm = this
283283
if (this.question.indexOf('?') === -1) {
284-
vm.answer = 'Les questions contiennent généralement un point d\'interrogation. ;-)'
284+
vm.answer = "Les questions contiennent généralement un point d'interrogation. ;-)"
285285
return
286286
}
287287
vm.answer = 'Je réfléchis...'
@@ -290,7 +290,7 @@ var watchExampleVM = new Vue({
290290
vm.answer = _.capitalize(response.data.answer)
291291
})
292292
.catch(function (error) {
293-
vm.answer = 'Erreur ! Impossible d\'accéder à l\'API.' + error
293+
vm.answer = "Erreur ! Impossible d'accéder à l'API." + error
294294
})
295295
},
296296
500

0 commit comments

Comments
 (0)