-
Notifications
You must be signed in to change notification settings - Fork 103
Traduction de computed.md #29
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
Conversation
There was a problem hiding this 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 ;)
src/v2/guide/computed.md
Outdated
|
||
<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 : |
There was a problem hiding this comment.
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
, celapeut les rendre
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
src/v2/guide/computed.md
Outdated
|
||
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**. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
src/v2/guide/computed.md
Outdated
@@ -34,21 +34,21 @@ var vm = new Vue({ | |||
message: 'Hello' |
There was a problem hiding this comment.
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 :) )
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
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
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
src/v2/guide/computed.md
Outdated
@@ -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' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
'ruojnoB'
ou
'tulaS'
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
src/v2/guide/computed.md
Outdated
return | ||
} | ||
this.answer = 'Thinking...' | ||
this.answer = 'Je réfléchis ...' |
There was a problem hiding this comment.
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 ...
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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 :)
There was a problem hiding this comment.
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.
src/v2/guide/computed.md
Outdated
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 |
There was a problem hiding this comment.
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
src/v2/guide/computed.md
Outdated
}, | ||
watch: { | ||
question: function (newQuestion) { | ||
this.answer = 'Waiting for you to stop typing...' | ||
this.answer = 'J\'attends que vous arrêtiez de taper ...' |
There was a problem hiding this comment.
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..."
src/v2/guide/computed.md
Outdated
@@ -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. ;-)' |
There was a problem hiding this comment.
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. ;-)"
src/v2/guide/computed.md
Outdated
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 |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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 « " ».
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
There was a problem hiding this 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 !
src/v2/guide/computed.md
Outdated
|
||
<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 : |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
destinées à
src/v2/guide/computed.md
Outdated
|
||
``` 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. |
There was a problem hiding this comment.
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
src/v2/guide/computed.md
Outdated
|
||
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
pour toute logique complexe
src/v2/guide/computed.md
Outdated
|
||
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. |
There was a problem hiding this comment.
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
src/v2/guide/computed.md
Outdated
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. |
There was a problem hiding this comment.
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
src/v2/guide/computed.md
Outdated
|
||
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 : |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
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"
There was a problem hiding this comment.
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
src/v2/guide/computed.md
Outdated
|
||
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
à des données changeantes
src/v2/guide/computed.md
Outdated
<!-- 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 --> |
There was a problem hiding this comment.
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
src/v2/guide/computed.md
Outdated
question: function (newQuestion) { | ||
this.answer = 'Waiting for you to stop typing...' | ||
this.answer = 'J\'attends que vous arrêtiez de taper ...' |
There was a problem hiding this comment.
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
Respect Eslint de Vue
There was a problem hiding this 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 ;)
src/v2/guide/computed.md
Outdated
|
||
### 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 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 : |
There was a problem hiding this comment.
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
Je laisse @sylvainpolletvillard ou @nyl-auster mergé quand ça leur conviendra aussi :) |
There was a problem hiding this 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é |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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 ?
There was a problem hiding this comment.
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 )
There was a problem hiding this comment.
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
OK pour moi |
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é") |
Prêt pour la relecture 😄