From 3e41491eb094d7b7a00213f03a3c86420a77ad5a Mon Sep 17 00:00:00 2001 From: forresst Date: Sat, 18 Feb 2017 15:11:42 +0100 Subject: [PATCH 1/5] Traduction de computed.md --- src/v2/guide/computed.md | 124 +++++++++++++++++++-------------------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index aac90b3fcc..26da2477ab 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -1,12 +1,12 @@ --- -title: Computed Properties and Watchers +title: Propriétés calculées et observateurs type: guide order: 5 --- -## Computed Properties +## Propriétés calculées -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

In-template expressions are very convenient, but they are really only meant for simple operations. Putting too much logic into your templates can make them bloated and hard to maintain. For example: +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 : ``` html
@@ -14,16 +14,16 @@ order: 5
``` -At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays `message` in reverse. The problem is made worse when you want to include the reversed message in your template more than once. +À 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. -That's why for any complex logic, you should use a **computed property**. +C'est pourquoi pour des logiques complexes, vous devriez utiliser des **propriétés calculées**. -### Basic Example +### Exemple basique ``` html
-

Original message: "{{ message }}"

-

Computed reversed message: "{{ reversedMessage }}"

+

Message original : "{{ message }}"

+

Message inversé calculé : "{{ reversedMessage }}"

``` @@ -34,21 +34,21 @@ var vm = new Vue({ message: 'Hello' }, computed: { - // a computed getter + // un accesseur calculé reversedMessage: function () { - // `this` points to the vm instance + // `this` pointe sur l'instance vm return this.message.split('').reverse().join('') } } }) ``` -Result: +Résultat : {% raw %}
-

Original message: "{{ message }}"

-

Computed reversed message: "{{ reversedMessage }}"

+

Message original : "{{ message }}"

+

Message inversé calculé : "{{ reversedMessage }}"

{% endraw %} -Here we have declared a computed property `reversedMessage`. The function we provided will be used as the getter function for the property `vm.reversedMessage`: +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` : ``` js console.log(vm.reversedMessage) // -> 'olleH' @@ -73,20 +73,20 @@ vm.message = 'Goodbye' console.log(vm.reversedMessage) // -> 'eybdooG' ``` -You can open the console and play with the example vm yourself. The value of `vm.reversedMessage` is always dependent on the value of `vm.message`. +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`. -You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.reversedMessage` depends on `vm.message`, so it will update any bindings that depend on `vm.reversedMessage` when `vm.message` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easy to test and reason about. +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. -### Computed Caching vs Methods +### Mise en cache dans `computed` vs `methods` -You may have noticed we can achieve the same result by invoking a method in the expression: +Vous avez peut-être remarqué que nous pouvons accomplir le même résultat en invoquant une méthode dans l'expression : ``` html -

Reversed message: "{{ reverseMessage() }}"

+

Message inversé : "{{ reverseMessage() }}"

``` ``` js -// in component +// dans le composant methods: { reverseMessage: function () { return this.message.split('').reverse().join('') @@ -94,9 +94,9 @@ methods: { } ``` -Instead of a computed property, we can define the same function as a method instead. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on their dependencies.** A computed property will only re-evaluate when some of its dependencies have changed. This means as long as `message` has not changed, multiple access to the `reversedMessage` computed property will immediately return the previously computed result without having to run the function again. +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. -This also means the following computed property will never update, because `Date.now()` is not a reactive dependency: +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 : ``` js computed: { @@ -106,13 +106,13 @@ computed: { } ``` -In comparison, a method invocation will **always** run the function whenever a re-render happens. +En comparaison, une invocation de méthode exécutera **toujours** la fonction à chaque fois que se produira un re-déclenchement du rendu. -Why do we need caching? Imagine we have an expensive computed property **A**, which requires looping through a huge Array and doing a lot of computations. Then we may have other computed properties that in turn depend on **A**. Without caching, we would be executing **A**’s getter many more times than necessary! In cases where you do not want caching, use a method instead. +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. -### Computed vs Watched Property +### Propriétés calculées vs observées -Vue does provide a more generic way to observe and react to data changes on a Vue instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example: +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 : ``` html
{{ fullName }}
@@ -137,7 +137,7 @@ var vm = new Vue({ }) ``` -The above code is imperative and repetitive. Compare it with a computed property version: +Le code ci-dessus est impératif et répétitif. Comparez-le avec une version de propriété calculée : ``` js var vm = new Vue({ @@ -154,21 +154,21 @@ var vm = new Vue({ }) ``` -Much better, isn't it? +C'est mieux, n'est-ce pas ? -### Computed Setter +### Mutateur calculé -Computed properties are by default getter-only, but you can also provide a setter when you need it: +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 : ``` js // ... computed: { fullName: { - // getter + // accesseur get: function () { return this.firstName + ' ' + this.lastName }, - // setter + // mutateur set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] @@ -179,18 +179,18 @@ computed: { // ... ``` -Now when you run `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName` and `vm.lastName` will be updated accordingly. +Maintenant, lorsque vous exécutez `vm.fullName = 'John Doe'`, le mutateur sera invoqué, `vm.firstName` et `vm.lastName` seront mis à jour en conséquence. -## Watchers +## Observateurs -While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That's why Vue provides a more generic way to react to data changes through the `watch` option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. +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. -For example: +Par exemple : ``` html

- Ask a yes/no question: + Posez votre question (réponse par Oui ou Non) :

{{ answer }}

@@ -198,10 +198,10 @@ For example: ``` ``` html - - - - + + + + {% endraw %} -In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer. None of that would be possible with a computed property. +Dans ce cas, l'utilisation de l'option `watch` nous permet d'effectuer une opération asynchrone (accéder à une API), de limiter la fréquence d'exécution de cette opération et de définir des états intermédiaires jusqu'à ce que nous obtenions une réponse finale. Rien de tout cela ne serait possible avec une propriété calculée. -In addition to the `watch` option, you can also use the imperative [vm.$watch API](../api/#vm-watch). +En plus de l'option `watch`, vous pouvez aussi utiliser [l'API vm.$watch](../api/#vm-watch). From be92aff856afbd95880d9258e9fe7e19d3c3576d Mon Sep 17 00:00:00 2001 From: forresst Date: Sat, 18 Feb 2017 19:59:54 +0100 Subject: [PATCH 2/5] =?UTF-8?q?Correction=20d'apr=C3=A8s=20les=20remarques?= =?UTF-8?q?=20de=20Haeresis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/computed.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 26da2477ab..5f28aaf391 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -6,7 +6,7 @@ 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, cela 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 pour des opérations simples. Mettre trop de logique dans vos templates peut les rendre trop verbeux et difficiles à maintenir. Par exemple : ``` html
@@ -16,7 +16,7 @@ Les expressions dans le template sont très pratiques, mais elles sont uniquemen À 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. -C'est pourquoi pour des logiques complexes, vous devriez utiliser des **propriétés calculées**. +C'est pourquoi vous devriez utiliser des **propriétés calculées** pour des logiques complexes. ### Exemple basique @@ -31,7 +31,7 @@ C'est pourquoi pour des logiques complexes, vous devriez utiliser des **proprié var vm = new Vue({ el: '#example', data: { - message: 'Hello' + message: 'Bonjour' }, computed: { // un accesseur calculé @@ -54,7 +54,7 @@ Résultat : var vm = new Vue({ el: '#example', data: { - message: 'Hello' + message: 'Bonjour' }, computed: { reversedMessage: function () { @@ -68,14 +68,14 @@ var vm = new Vue({ 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` : ``` js -console.log(vm.reversedMessage) // -> 'olleH' -vm.message = 'Goodbye' -console.log(vm.reversedMessage) // -> 'eybdooG' +console.log(vm.reversedMessage) // -> 'ruojnoB' +vm.message = 'Au revoir' +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 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. +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. ### Mise en cache dans `computed` vs `methods` @@ -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 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 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. ### 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 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 : +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 : ``` html
{{ fullName }}
@@ -158,7 +158,7 @@ C'est mieux, n'est-ce pas ? ### Mutateur calculé -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 : +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 : ``` js // ... @@ -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 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. +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. Par exemple : From 2c483aed511cbc75cbb4c393e2336212d90add64 Mon Sep 17 00:00:00 2001 From: forresst Date: Sun, 19 Feb 2017 12:53:56 +0100 Subject: [PATCH 3/5] =?UTF-8?q?Correction=20compl=C3=A9mentaires=20d'apr?= =?UTF-8?q?=C3=A8s=20les=20remarques=20de=20Haeresis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/computed.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 5f28aaf391..df20d1d6eb 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -201,7 +201,7 @@ Par exemple : - + @@ -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() } }, @@ -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...' @@ -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 ) } @@ -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() } }, @@ -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...' @@ -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 From 977d06a9870af23925d6b2351c0c8fe44fbd4a04 Mon Sep 17 00:00:00 2001 From: forresst Date: Mon, 20 Feb 2017 09:55:31 +0100 Subject: [PATCH 5/5] Correction de deux fautes --- src/v2/guide/computed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 367ee5aed1..0c1c0216bf 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -112,7 +112,7 @@ Pourquoi avons-nous besoin de mettre en cache ? Imaginez que nous avons une prop ### Propriétés calculées vs observées -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 : +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 non une fonction de retour impérative comme `watch`. Considérez cet exemple : ``` html
{{ fullName }}