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

Conversation

forresst
Copy link

Prêt pour la relecture 😄

Copy link
Member

@MachinisteWeb MachinisteWeb left a comment

Choose a reason for hiding this comment

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

Merci pour cette traduction !

Franchement ces propriété calculées elle sont quand même super cool :)

Plusieurs proposition dans mes retours. Je te laisse voir ça ;)


<p class="tip">**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).**</p>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 :
Copy link
Member

Choose a reason for hiding this comment

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

Retirer , cela pour la fluidité de la phrase.

Mettre trop de logique dans vos templates , cela peut les rendre

Copy link
Author

Choose a reason for hiding this comment

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

ok


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**.
Copy link
Member

Choose a reason for hiding this comment

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

Je mettrais

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

Pour éviter la virgule. Sinon, il me semble qu'il faille en mettre deux (même si en VO nous n'en avons qu'une)

C'est pourquoi, pour des logiques complexes, vous devriez utiliser des propriétés calculées.

Je sais pas ce que vous en pensez. Peut-être que c'est moi haha.

Copy link
Author

Choose a reason for hiding this comment

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

la première me va bien

@@ -34,21 +34,21 @@ var vm = new Vue({
message: 'Hello'
Copy link
Member

Choose a reason for hiding this comment

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

'Bonjour'

ou p-e

'Salut'

Nous traduisons les termes entre « " " » ainsi que les commentaires. (Nous traduisons cependant Hello World par... Hello World :) )

Copy link
Author

Choose a reason for hiding this comment

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

ok

@@ -65,38 +65,38 @@ var vm = new Vue({
</script>
Copy link
Member

Choose a reason for hiding this comment

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

'Bonjour'

ou p-e

'Salut'

au niveau de data.

Copy link
Author

Choose a reason for hiding this comment

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

ok

@@ -65,38 +65,38 @@ var vm = new Vue({
</script>
{% 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'
Copy link
Member

Choose a reason for hiding this comment

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

'ruojnoB'

ou

'tulaS'

Copy link
Author

Choose a reason for hiding this comment

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

ok

return
}
this.answer = 'Thinking...'
this.answer = 'Je réfléchis ...'
Copy link
Member

Choose a reason for hiding this comment

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

pas d'espace entre réfléchis et ...

Copy link
Author

Choose a reason for hiding this comment

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

Euh, j'ai un doute, je crois qu'en français il faut laisser un espace ! Je vais chercher cela.

Copy link
Member

Choose a reason for hiding this comment

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

Je te laisse trouver qu'il nxy a pas d'espace :)

Copy link
Author

Choose a reason for hiding this comment

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

Tu as raison !!! Pas d'espace... (Tu noteras que j'ai bien retiendu la leçon 😄 )
Je corrige cela.

var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
vm.answer = 'Erreur ! Impossible d\'accéder à l\'API.' + error
Copy link
Member

Choose a reason for hiding this comment

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

Je mettrais

"Erreur ! Impossible d'accéder à l'API." + error

},
watch: {
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.answer = 'J\'attends que vous arrêtiez de taper ...'
Copy link
Member

Choose a reason for hiding this comment

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

"J'attends que vous arrêtiez de taper..."

@@ -281,16 +281,16 @@ var watchExampleVM = new Vue({
function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Questions usually contain a question mark. ;-)'
vm.answer = 'Les questions contiennent généralement un point d\'interrogation. ;-)'
Copy link
Member

Choose a reason for hiding this comment

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

"Les questions contiennent généralement un point d'interrogation. ;-)"

axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
vm.answer = 'Erreur ! Impossible d\'accéder à l\'API.' + error
Copy link
Member

Choose a reason for hiding this comment

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

"'Erreur ! Impossible d'accéder à l'API." + error

Choose a reason for hiding this comment

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

on est pas censé changé le codestyle même quand ça nous arrange pour la langue

Copy link
Member

@MachinisteWeb MachinisteWeb Feb 18, 2017

Choose a reason for hiding this comment

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

Pour moi il y a changement de « codestyle » ici :

var var1 = "test",
    var2 = "test2",
    var3 = "test3";
var var1 = "test";
var var2 = "test2";
var var3 = "test3";

Cependant dans le cas du remplacement de « " » par « ' » il n'y a pas de changement de « codestyle » (http://stackoverflow.com/a/242833/2412797), juste l'utilisation d'une fonctionnalité qui est là pour ça.

Il serait abérant d'écrire :

var test = '<p>' +
    'Ceci est un test.<br/>' +
    'J\'aime les tests.' +
'</p>';

au lieu de

var test = `<p>
    Ceci est un test. <br/>
    J'aime les tests.
</p>`;

prétextant un « codestyle » (prétextant le non support de ES6, Oui).

Ceci serait pareil pour :

<a href="javascript:goTo(\"http://.../\")"> au lieu de simplement

<a href="javascript:goTo('http://.../')"> ou

<a href='javascript:goTo("http://.../")'> prétextant encore un « codestyle »

L'important pour moi dans ce contexte est la lisibilité du code et la capacité dans copier-coller des parts de contenus sans devoir le retravailler. Elle ne peut pas être atteinte en conservant « ' » avec une phrase contenant une apostrophe.

Par exemple : si on voulais un code parfait on ne mettrait pas :

vm.answer = 'Erreur ! Impossible d\'accéder à l\'API.' + error

mais

vm.answer = i18n.error.notReached + error;

mais pour une question de lisibilité et de compréhension, on décide de marquer textuellement et de piéger le texte dans notre exemple. Pourquoi alors ne pas suivre cette philosophie de simplification pour la bonne compréhension jusqu'au bout ?

Je laisse d'autres avis s'en mêler !

PS : Et quand bien même on ne serait pas d'accord sur ce qui est ou n'est pas du « codestyle » de la même manière que l'on défini que « dans le cas ou un template s'étale sur plusieurs ligne on utilise « ` », dans le cas ou l'apostrophe est un caractère de la phrase, on utilise « " ».

Copy link
Author

Choose a reason for hiding this comment

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

Je reste en attente d'une décision sur ce sujet ! Je ferais selon vos décisions

Copy link
Member

Choose a reason for hiding this comment

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

2 contre 1 pour le moment, ça s'annonce mal pour moi ! :D

Choose a reason for hiding this comment

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

Ce n'est pas à nous de définir ce qui est ou pas du code style, cette décision ne nous appartient pas.

Pour rappel, l'équipe de Vue utilise ESLint et a des règles de codestyle bien établies qui doivent être respectées pour toute la doc de Vue peu importe la langue. Voir la configuration ESLint: https://github.com/vuejs/eslint-config-vue/blob/master/index.js

Cette conf indique explicitement que les single quotes doivent être utilisées, mais un flag a été ajouté pour tolérer le changement de quotes si cela permet d'éviter un échappement. Donc le passage aux double quotes est tolérable ici, mais @forresst a eu le bon réflexe de coller au plus proche du code style d'origine.

Copy link
Member

Choose a reason for hiding this comment

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

Je maintiens que " au lieu de ' pour éviter un échappement c'est du bon sens pour la lisibilité :)

'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],

Cependant c'est @forresst qui à le dernier mot ! (Advice Process Oblige !).

On garde les '. Clos donc.

Copy link
Author

@forresst forresst Feb 19, 2017

Choose a reason for hiding this comment

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

Euh je voulais pas créer une polémique. Je suis pour la paix des ménages 😄
Si vous voulez que je respecte eslint de Vue, je respecte. Cette proposition me parait acceptable.

Si c'est moi qui doit décider donc allons pour le respect de eslint de vue. Je ferai les modifications pour appliquer par défaut la simple quote sauf dans le cas d'échappement.

Copy link

@yann-yinn yann-yinn Feb 19, 2017

Choose a reason for hiding this comment

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

'Erreur ! Impossible d\'accéder à l\'API.' + error

Franchement si ça peut éviter ce genre de truc pas lisible et que c'est toléré par le codestyle, on peut s'autoriser les double quotes quand il y a un mot sur deux avec une apostrophe (un probleme bien plus rare en anglais), à moins d'avoir un petit fond maso :-p

Copy link
Author

Choose a reason for hiding this comment

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

C'est ce que j'ai fait dans mon dernier commit

Copy link
Member

@sylvainpolletvillard sylvainpolletvillard left a comment

Choose a reason for hiding this comment

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

1ère relecture, probablement pas besoin d'une deuxième passe. Good job !


<p class="tip">**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).**</p>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 peut les rendre trop verbeux et difficiles à maintenir. Par exemple :

Choose a reason for hiding this comment

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

destinées à


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

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.

Choose a reason for hiding this comment

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

At this point => À ce stade


That's why for any complex logic, you should use a **computed property**.
C'est pourquoi vous devriez utiliser des **propriétés calculées** pour des logiques complexes.

Choose a reason for hiding this comment

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

pour toute logique complexe


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

Choose a reason for hiding this comment

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

Et le mieux dans tout cela est que

methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
```

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.

Choose a reason for hiding this comment

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

supprimer "à la place" (doublon avec Au lieu de)

nous pouvons définir la même fonction en tant que méthode.

mises en cache selon leurs dépendances

sans avoir à réexécuter la fonction


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 de retour impérative de `watch`. Considérez cet exemple :

Choose a reason for hiding this comment

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

pourquoi "vraiment" dans la première phrase ?

qu'il faut changer selon d'autres données
(ou "sur la base d'autres données")

et non une fonction de retour impérative comme watch

@@ -179,67 +179,67 @@ 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.

Choose a reason for hiding this comment

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

sera invoqué et
(en remplacement de la virgule)

Copy link
Author

Choose a reason for hiding this comment

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

J'avais mis une virgule pour éviter la répétition du "et"

Choose a reason for hiding this comment

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

pas moyen d'éviter la répétition ici sans casser le rythme de la phrase, il faut deux fois "et" comme pour le texte original


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

Choose a reason for hiding this comment

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

à des données changeantes

<!-- gives you the freedom to just use what you're familiar with. -->
<!-- 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 -->

Choose a reason for hiding this comment

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

le noyau de Vue peut rester petit
ou la base peut rester petite

question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.answer = 'J\'attends que vous arrêtiez de taper ...'

Choose a reason for hiding this comment

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

se référer à la conf ESLint pour le codestyle : https://github.com/vuejs/eslint-config-vue/blob/master/index.js

Copy link
Member

@MachinisteWeb MachinisteWeb left a comment

Choose a reason for hiding this comment

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

On y est presque ! Deux broutille encore ;)


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

@MachinisteWeb
Copy link
Member

Je laisse @sylvainpolletvillard ou @nyl-auster mergé quand ça leur conviendra aussi :)

Copy link

@yann-yinn yann-yinn left a comment

Choose a reason for hiding this comment

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

Une relecture rapide avec quelques suggestions mineures, joli boulot :D

},
computed: {
// a computed getter
// un accesseur calculé

Choose a reason for hiding this comment

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

je mettrais aussi (getter) entre parenthèses ici car c'est la première occurrence


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

@sylvainpolletvillard
Copy link
Member

OK pour moi

@MachinisteWeb MachinisteWeb merged commit 10360ab into vuejs-fr:master Feb 22, 2017
@yann-yinn
Copy link

Détail mineur : je vois que la deuxieme occurrence du mot accesseur est suivi de "getter" entre parenthèses pour expliciter: mais pas la première (ligne 37 "un accesseur calculé")

@forresst forresst deleted the translate-computed branch February 25, 2017 16:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants