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
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ 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, cela 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 pour 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">
@@ -16,7 +16,7 @@ Les expressions dans le template sont très pratiques, mais elles sont uniquemen
16
16
17
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.
18
18
19
-
C'est pourquoi pour des logiques complexes, vous devriez utiliser des **propriétés calculées**.
19
+
C'est pourquoi vous devriez utiliser des **propriétés calculées** pour des logiques complexes.
20
20
21
21
### Exemple basique
22
22
@@ -31,7 +31,7 @@ C'est pourquoi pour des logiques complexes, vous devriez utiliser des **proprié
31
31
var vm =newVue({
32
32
el:'#example',
33
33
data: {
34
-
message:'Hello'
34
+
message:'Bonjour'
35
35
},
36
36
computed: {
37
37
// un accesseur calculé
@@ -54,7 +54,7 @@ Résultat :
54
54
var vm =newVue({
55
55
el:'#example',
56
56
data: {
57
-
message:'Hello'
57
+
message:'Bonjour'
58
58
},
59
59
computed: {
60
60
reversedMessage:function () {
@@ -68,14 +68,14 @@ var vm = new Vue({
68
68
Ici, nous avons déclaré une propriété calculée `reversedMessage`. La fonction que nous avons fournie sera utilisée comme une fonction accesseur (getter) pour la propriété `vm.reversedMessage` :
69
69
70
70
```js
71
-
console.log(vm.reversedMessage) // -> 'olleH'
72
-
vm.message='Goodbye'
73
-
console.log(vm.reversedMessage) // -> 'eybdooG'
71
+
console.log(vm.reversedMessage) // -> 'ruojnoB'
72
+
vm.message='Au revoir'
73
+
console.log(vm.reversedMessage) // -> 'riover uA'
74
74
```
75
75
76
76
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 la meilleure chose, c'est que nous avons créé 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 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.
79
79
80
80
### Mise en cache dans `computed` vs `methods`
81
81
@@ -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 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 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.
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 impérative de retour de `watch`. Considérez cet exemple :
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 :
116
116
117
117
```html
118
118
<divid="demo">{{ fullName }}</div>
@@ -158,7 +158,7 @@ C'est mieux, n'est-ce pas ?
158
158
159
159
### Mutateur calculé
160
160
161
-
Les propriétés calculées ont par défaut un accesseur uniquement, mais vous pouvez également fournir un mutateur (setter) quand vous en avez besoin :
161
+
Les propriétés calculées ont par défaut uniquement un accesseur, mais vous pouvez également fournir un mutateur (setter) quand vous en avez besoin :
162
162
163
163
```js
164
164
// ...
@@ -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 sont 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 aux données changeantes.
0 commit comments