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/computed.md
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -6,17 +6,17 @@ order: 5
6
6
7
7
## Propriétés calculées
8
8
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 :
10
10
11
11
```html
12
12
<divid="example">
13
13
{{ message.split('').reverse().join('') }}
14
14
</div>
15
15
```
16
16
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.
18
18
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.
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`.
77
77
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.
79
79
80
80
### Mise en cache dans `computed` vs `methods`
81
81
@@ -94,7 +94,7 @@ methods: {
94
94
}
95
95
```
96
96
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.
98
98
99
99
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 :
100
100
@@ -108,11 +108,11 @@ computed: {
108
108
109
109
En comparaison, une invocation de méthode exécutera **toujours** la fonction à chaque fois que se produira un re-déclenchement du rendu.
110
110
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.
112
112
113
113
### Propriétés calculées vs observées
114
114
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 qu’il 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 :
116
116
117
117
```html
118
118
<divid="demo">{{ fullName }}</div>
@@ -183,7 +183,7 @@ Maintenant, lorsque vous exécutez `vm.fullName = 'John Doe'`, le mutateur sera
183
183
184
184
## Observateurs
185
185
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.
187
187
188
188
Par exemple :
189
189
@@ -200,7 +200,7 @@ Par exemple :
200
200
```html
201
201
<!-- Puisqu'il y a déjà un riche écosystème de bibliothèques ajax -->
202
202
<!-- 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 -->
204
204
<!-- donne aussi la liberté d’utiliser tout ce qui vous est familier. -->
0 commit comments