Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Traduction de computed.md #29

Merged
merged 5 commits into from
Feb 22, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions src/v2/guide/computed.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ order: 5

## Propriétés calculées

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 :
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 :

``` html
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
```

À 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.
À 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.

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

### Exemple basique

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

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`.

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.
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

un doute de français, c'est pas au singulier dans ce cas "effet secondaire" vu qu'il n'y en pas ?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"le mieux dans tout ça" => "le plus beau dans tout ça" ( subjectif : je trouve ça plus naturel et ça retranscrit mieux le côté un peu enthousiasmant de l'original )

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

c'est au singulier quand précédé par "aucun", sinon les deux formes sont valides


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

Expand All @@ -94,7 +94,7 @@ methods: {
}
```

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.
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.

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 :

Expand All @@ -108,11 +108,11 @@ computed: {

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

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.
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.

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

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 :
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 :
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

d'abuser (sans pour la consistance)

et pas et non ==> et non


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

## Observateurs

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.
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.

Par exemple :

Expand All @@ -200,7 +200,7 @@ Par exemple :
``` html
<!-- Puisqu'il y a déjà un riche écosystème de bibliothèques ajax -->
<!-- et de collections de méthodes d'utilité générale, en ne les -->
<!-- réinventant pas, la base de Vue peut rester petit. Cela vous -->
<!-- réinventant pas, le noyau de Vue peut rester petit. Cela vous -->
<!-- donne aussi la liberté d’utiliser tout ce qui vous est familier. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
Expand All @@ -214,7 +214,7 @@ var watchExampleVM = new Vue({
watch: {
// à chaque fois que la question change, cette fonction s'exécutera
question: function (newQuestion) {
this.answer = 'J\'attends que vous arrêtiez de taper ...'
this.answer = "J'attends que vous arrêtiez de taper..."
this.getAnswer()
}
},
Expand All @@ -229,7 +229,7 @@ var watchExampleVM = new Vue({
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Les questions contiennent généralement un point d\'interrogation. ;-)'
this.answer = "Les questions contiennent généralement un point d'interrogation. ;-)"
return
}
this.answer = 'Je réfléchis...'
Expand All @@ -239,11 +239,11 @@ var watchExampleVM = new Vue({
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Erreur ! Impossible d\'accéder à l\'API.' + error
vm.answer = "Erreur ! Impossible d'accéder à l'API." + error
})
},
// This is the number of milliseconds we wait for the
// user to stop typing.
// C'est le nombre de millisecondes que nous attendons
// pour que l’utilisateur arrête de taper.
500
)
}
Expand Down Expand Up @@ -272,7 +272,7 @@ var watchExampleVM = new Vue({
},
watch: {
question: function (newQuestion) {
this.answer = 'J\'attends que vous arrêtiez de taper ...'
this.answer = "J'attends que vous arrêtiez de taper..."
this.getAnswer()
}
},
Expand All @@ -281,7 +281,7 @@ var watchExampleVM = new Vue({
function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Les questions contiennent généralement un point d\'interrogation. ;-)'
vm.answer = "Les questions contiennent généralement un point d'interrogation. ;-)"
return
}
vm.answer = 'Je réfléchis...'
Expand All @@ -290,7 +290,7 @@ var watchExampleVM = new Vue({
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Erreur ! Impossible d\'accéder à l\'API.' + error
vm.answer = "Erreur ! Impossible d'accéder à l'API." + error
})
},
500
Expand Down