-
Notifications
You must be signed in to change notification settings - Fork 103
reactivity.md #37
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
reactivity.md #37
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. C'est plutôt bien tout ça ! J'ai pas non plus trouvé tant de remaniement à débattre que ça !
Je te laisse voir ce que tu changes ou pas sachant qu'il y a quelque point de « consistance » avec les traductions passé à absolument changer (et ouvrir une issue pour rétroactivement revenir en arrière dessus le cas échéant, mais pas pour cette fois).
src/v2/guide/reactivity.md
Outdated
type: guide | ||
order: 12 | ||
--- | ||
|
||
<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>We've covered most of the basics - now it's time to take a deep dive! One of Vue's most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management very simple and intuitive, but it's also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue's reactivity system. | ||
Nous avons couvert la plupart des principes fondamentaux, maintenant il est temps de plonger dans le détail ! L'une des caractéristiques les plus évidentes de Vue est le système discret de réactivité. Les modèles sont simplement des objets JavaScript. Lorsque vous les modifiez, la vue est changée. Cela rend la gestion de l'état très simple et intuitive, mais il est également important de comprendre comment cela fonctionne pour éviter quelques erreurs habituelles. Dans cette section, nous allons creuser certains détails de bas niveau du système de réactivité 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.
Avis
Autant Depth pour le détail est parfait dans le titre. Autant « deep dive » avec « ! » me semble montrer de l'enthousiasme et genre du vertige ! Alors que « dans le détail » ça me fait pas vibrer du tout :D.
Genre « dans les méandres » ca va mieux avec le « ! » ou des trucs comme ça « dans le terrier du lapin », « sous le capot ».
Fondamentalement on s'en fou p-e ou je me trompe comme une quiche parce que ce point interrogation est pas si « extraordinaire » que ça. Pas comme les PV d'assemblés générals :D
Vos avis ?
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.
Avis
est le système de réactivité discret
semble sonner mieux. Complètement subjectif. Toi qui voit !
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 vue est changée --> la vue est mise à jour
déjà utilisé le terme de mise à jour à chaque utilisation de updates dans les traductions précédentes
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 crois que « state management » se traduit par « gestionnaire d'état » comme « event handler » par gestionnaire d'événement et pas « la gestion des événements ».
Je veux pas dire que c'est fondamentalement faux mais par « consistance » autant utiliser la même nomonclature.
src/v2/guide/reactivity.md
Outdated
|
||
When you pass a plain JavaScript object to a Vue instance as its `data` option, Vue will walk through all of its properties and convert them to getter/setters using [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). This is an ES5-only and un-shimmable feature, which is why Vue doesn't support IE8 and below. | ||
Lorsque vous passez un simple objet JavaScript à une instance de Vue comme son option `data`, Vue parcourra toutes ses propriétés et les convertira en accesseurs/mutateurs (getters/setters) en utilisant [Object.defineProperty](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty). Il s’agit d’une fonctionnalité ES5 uniquement et qui ne peut pas être émulée, c'est pourquoi Vue ne prend pas en charge IE8 et les versions antérieures. |
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.
s'agit d'une (apostrophes)
src/v2/guide/reactivity.md
Outdated
|
||
The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that browser consoles format getter/setters differently when converted data objects are logged, so you may want to install [vue-devtools](https://github.com/vuejs/vue-devtools) for a more inspection-friendly interface. | ||
Les accesseurs/mutateurs sont invisibles pour l'utilisateur, mais sous le capot, ils permettent à Vue d'effectuer le suivi des dépendances et la notification de changement quand les propriétés sont accédées ou modifiées. Avec un avertissement, les consoles des navigateurs formatent les accesseurs/mutateurs différemment lorsque les objets de données converties sont affichés, vous pouvez donc installer [vue-devtools](https://github.com/vuejs/vue-devtools) pour avoir une interface plus sympathique lors de l'inspection. |
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 des limitations est que les consoles des navigateurs formatent les accesseurs/mutateurs différemment lorsque les objets de données converties sont affichés
Mais comme tu as traduit par limitation plus bas, il y a p-e une nuance que j'ai pas saisie ici ?
src/v2/guide/reactivity.md
Outdated
|
||
Every component instance has a corresponding **watcher** instance, which records any properties "touched" during the component's render as dependencies. Later on when a dependency's setter is triggered, it notifies the watcher, which in turn causes the component to re-render. | ||
Chaque instance de composant a une instance **d'observateur** correspondante, qui enregistre toutes les propriétés « impactées » pendant le rendu du composant sous forme de dépendances. Plus tard, lorsque le mutateur d'une dépendance est déclenché, il en avertit l'observateur, ce qui provoque à son tour le re-rendu du composant. |
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'observateur
pas de gras sur le « de »
src/v2/guide/reactivity.md
Outdated
|
||
Due to the limitations of modern JavaScript (and the abandonment of `Object.observe`), Vue **cannot detect property addition or deletion**. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the `data` object in order for Vue to convert it and make it reactive. For example: | ||
En raison des limites du JavaScript moderne (et l’abandon de `Object.observe`), Vue **ne peut pas détecter l'ajout et la suppression de propriété**. Étant donné que Vue effectue le processus de conversion de l'accesseur/mutateur lors de l’initialisation de l’instance, une propriété doit être présente dans l’objet `data` afin que Vue puisse le convertir et le rendre réactif. 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.
l'abandon (apostrophe)
l'initialisation de l'instance (apostrophes)
l'objet (apostrophe)
src/v2/guide/reactivity.md
Outdated
|
||
In case you haven't noticed yet, Vue performs DOM updates **asynchronously**. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop "tick", Vue flushes the queue and performs the actual (already de-duped) work. Internally Vue tries native `Promise.then` and `MutationObserver` for the asynchronous queuing and falls back to `setTimeout(fn, 0)`. | ||
Au cas où vous ne l'auriez pas encore remarqué, Vue effectue les mises à jour du DOM de façon **asynchrone**. Chaque fois qu'un changement de données est observé, cela ouvrira une file d'attente et mettra en mémoire toutes les modifications de données qui se sont produites dans la même boucle d'événement. Si le même observateur est déclenché plusieurs fois, il ne sera envoyé qu'une seule fois dans la file d'attente. Cette suppression des doublons en mémoire est primordiale car elle évite des calculs et des manipulations du DOM inutiles. Puis, lors du prochain « battement » (tick) de la boucle d'événement, Vue vide la file d'attente et effectue le travail (la suppression des doublons est déjà faite). Intérieurement Vue essaye les fonctions natives `Promise.then` et `MutationObserver` pour la file d'attente asynchrone et se replie si ça ne fonctionne pas vers `setTimeout(fn, 0)`. |
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.
Avis
si je devais traduire tick
je dirais tour
pour lors du prochain tour de boucle (qu'on désigne donc souvent par next tick).
src/v2/guide/reactivity.md
Outdated
|
||
In case you haven't noticed yet, Vue performs DOM updates **asynchronously**. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop "tick", Vue flushes the queue and performs the actual (already de-duped) work. Internally Vue tries native `Promise.then` and `MutationObserver` for the asynchronous queuing and falls back to `setTimeout(fn, 0)`. | ||
Au cas où vous ne l'auriez pas encore remarqué, Vue effectue les mises à jour du DOM de façon **asynchrone**. Chaque fois qu'un changement de données est observé, cela ouvrira une file d'attente et mettra en mémoire toutes les modifications de données qui se sont produites dans la même boucle d'événement. Si le même observateur est déclenché plusieurs fois, il ne sera envoyé qu'une seule fois dans la file d'attente. Cette suppression des doublons en mémoire est primordiale car elle évite des calculs et des manipulations du DOM inutiles. Puis, lors du prochain « battement » (tick) de la boucle d'événement, Vue vide la file d'attente et effectue le travail (la suppression des doublons est déjà faite). Intérieurement Vue essaye les fonctions natives `Promise.then` et `MutationObserver` pour la file d'attente asynchrone et se replie si ça ne fonctionne pas vers `setTimeout(fn, 0)`. |
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.
avis
et se rabat sur
setTimeout(fn, 0)
si ça ne fonctionne pas.
Parceque on se rabat sur ce qui reste. Repli ça fait un peu persécution :D
src/v2/guide/reactivity.md
Outdated
|
||
For example, when you set `vm.someData = 'new value'`, the component will not re-render immediately. It will update in the next "tick", when the queue is flushed. Most of the time we don't need to care about this, but it can be tricky when you want to do something that depends on the post-update DOM state. Although Vue.js generally encourages developers to think in a "data-driven" fashion and avoid touching the DOM directly, sometimes it might be necessary to get your hands dirty. In order to wait until Vue.js has finished updating the DOM after a data change, you can use `Vue.nextTick(callback)` immediately after the data is changed. The callback will be called after the DOM has been updated. For example: | ||
Par exemple, lorsque vous définissez `vm.someData = 'nouvelle valeur'`, le composant ne sera pas re-rendu immédiatement. Il se mettra à jour dans le prochain « battement » (tick), lorsque la file d’attente sera vidée. La plupart du temps nous n'avons pas besoin de nous en soucier, mais cela peut être délicat lorsque vous voulez faire quelque chose qui dépend de l’état du DOM après sa mise à jour. Bien que Vue.js encourage généralement les développeurs à penser d'un axe de « diriger par les données » (« data-driven ») en évitant de toucher le DOM directement, parfois il peut être nécessaire de se salir les mains. Pour attendre que Vue.js ait terminé la mise à jour du DOM après un changement de données, vous pouvez utiliser `Vue.nextTick (callback)` immédiatement après la modification des données. Le callback sera appelé après que le DOM ait été mis à jour. 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.
rendu de nouveau
pour re-rendu.
src/v2/guide/reactivity.md
Outdated
|
||
Every component instance has a corresponding **watcher** instance, which records any properties "touched" during the component's render as dependencies. Later on when a dependency's setter is triggered, it notifies the watcher, which in turn causes the component to re-render. | ||
Chaque instance de composant a une instance **d'observateur** correspondante, qui enregistre toutes les propriétés « impactées » pendant le rendu du composant sous forme de dépendances. Plus tard, lorsque le mutateur d'une dépendance est déclenché, il en avertit l'observateur, ce qui provoque à son tour le re-rendu du composant. |
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 qui provoque à son tour un nouveau rendu du composant
(à chaque fois qu'on a pu éviter le terme « re-rendu » « re-rendre » on s'est servi du mot « nouveau ») c'est pour la consistance indépendamment du fait que @sylvainpolletvillard n'aime pas ça :D
src/v2/guide/reactivity.md
Outdated
}) | ||
``` | ||
|
||
There is also the `vm.$nextTick()` instance method, which is especially handy inside components, because it doesn't need global `Vue` and its callback's `this` context will be automatically bound to the current Vue instance: | ||
Il y a aussi la méthode de l'instance `vm.$nextTick()`, qui est particulièrement pratique à l'intérieur des composants, car il n'a pas besoin de la globale de `Vue` et le contexte `this` de son callback sera automatiquement lié à l'instance courante 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.
la méthode d'instance
(sous entendu la méthode que l'on trouve dans chaque instance). Dans ce cas précis, si on dit « de l' » on a l'impression qu'on parle « d'une » instance en particulier, ce qui n'est pas le cas ici.
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.
avis
Ici aussi je préciserai que là on parle de la variable.
car elle n'a pas besoin de la variable globale de
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 contexte
this
de sa fonction de retour sera
(on a traduit callback par fonction de retour précédemment)
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.
l'instance courante 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.
1ère relecture
src/v2/guide/reactivity.md
Outdated
type: guide | ||
order: 12 | ||
--- | ||
|
||
<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>We've covered most of the basics - now it's time to take a deep dive! One of Vue's most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management very simple and intuitive, but it's also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue's reactivity system. | ||
Nous avons couvert la plupart des principes fondamentaux, maintenant il est temps de plonger dans les méandres ! L'une des caractéristiques les plus évidentes de Vue est le système de réactivité discret. Les modèles sont simplement des objets JavaScript. Lorsque vous les modifiez, la vue est mise à jour. Cela rend le gestionnaire d'état très simple et intuitive, mais il est également important de comprendre comment cela fonctionne pour éviter quelques erreurs habituelles. Dans cette section, nous allons creuser certains détails de bas niveau du système de réactivité 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.
dans les méandres... de quoi ? Il manque un bout à l'expression. Je suggère "dans les méandres de Vue" ou "plonger en profondeur"
One of Vue's most distinct features => L'une des fonctionnalités les plus caractéristiques/emblématiques de Vue
le système de réactivité non obstrusif
la vue se met à jour
Cela rend la gestion d'état
quelques erreurs classiques/communes
nous allons nous pencher sur certains détails
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.
Cela rend la gestion d'état : @haeresis m'a proposé "le gestionnaire d'état" à la place de "gestion d'état" : je ne sais pas trop quoi en penser ? Je fais quoi ?
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.
aucun doute pour moi:
state management = gestion d'état ;
state manager = gestionnaire d'état
en cas de désaccord sur une correction, on discute jusqu'à se mettre d'accord et si impossible de se mettre d'accord, on trouve une troisième option qui soit un bon compromis pour la compréhension.
src/v2/guide/reactivity.md
Outdated
|
||
## How Changes Are Tracked | ||
## Comment les modifications sont suivies ? |
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.
sont tracées ?
src/v2/guide/reactivity.md
Outdated
|
||
When you pass a plain JavaScript object to a Vue instance as its `data` option, Vue will walk through all of its properties and convert them to getter/setters using [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). This is an ES5-only and un-shimmable feature, which is why Vue doesn't support IE8 and below. | ||
Lorsque vous passez un simple objet JavaScript à une instance de Vue comme son option `data`, Vue parcourra toutes ses propriétés et les convertira en accesseurs/mutateurs (getters/setters) en utilisant [Object.defineProperty](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty). Il s'agit d'une fonctionnalité ES5 uniquement et qui ne peut pas être émulée, c'est pourquoi Vue ne prend pas en charge IE8 et les versions antérieures. |
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.
via son option data
src/v2/guide/reactivity.md
Outdated
|
||
The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that browser consoles format getter/setters differently when converted data objects are logged, so you may want to install [vue-devtools](https://github.com/vuejs/vue-devtools) for a more inspection-friendly interface. | ||
Les accesseurs/mutateurs sont invisibles pour l'utilisateur, mais sous le capot, ils permettent à Vue d'effectuer le suivi des dépendances et la notification de changement quand les propriétés sont accédées ou modifiées. Une des limitations est que les consoles des navigateurs formatent les accesseurs/mutateurs différemment lorsque les objets de données converties sont affichés, vous pouvez donc installer [vue-devtools](https://github.com/vuejs/vue-devtools) pour avoir une interface plus sympathique lors de l'inspection. |
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.
lorsque les objets de données convertis sont logués
src/v2/guide/reactivity.md
Outdated
|
||
Every component instance has a corresponding **watcher** instance, which records any properties "touched" during the component's render as dependencies. Later on when a dependency's setter is triggered, it notifies the watcher, which in turn causes the component to re-render. | ||
Chaque instance de composant a une instance d'**observateur** correspondante, qui enregistre toutes les propriétés « impactées » pendant le rendu du composant sous forme de dépendances. Plus tard, lorsque le mutateur d'une dépendance est déclenché, il en avertit l'observateur, ce qui provoque à son tour un nouveau rendu du composant. |
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.
toutes les propriétés "touchées" (elles ne sont pas impactées, cette étape ne fait aucune mutation, seulement un accès en lecture)
qui enregistre comme dépendances toutes les propriétés (je change l'ordre dans la phrase pour que ce soit plus compréhensible)
src/v2/guide/reactivity.md
Outdated
|
||
Since Vue doesn't allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even just with an empty value: | ||
Étant donné que Vue ne permet pas d'ajouter dynamiquement des propriétés réactives au niveau de la racine, vous devez initialiser les instances de Vue en déclarant toutes les propriétés des données réactives au niveau de la racine, même avec juste une valeur vide : |
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.
en déclarant [dès le départ / à l'avance] toutes les propriétés
src/v2/guide/reactivity.md
Outdated
|
||
There are technical reasons behind this restriction - it eliminates a class of edge cases in the dependency tracking system, and also makes Vue instances play nicer with type checking systems. But there is also an important consideration in terms of code maintainability: the `data` object is like the schema for your component's state. Declaring all reactive properties upfront makes the component code easier to understand when revisited later or read by another developer. | ||
Il y a des raisons techniques derrière cette restriction (ça élimine tout une partie de cas particuliers dans le système de suivi, et permet également aux instances de Vue de mieux jouer avec les systèmes de vérification de type). Mais il y a aussi une considération importante en termes de maintenance de code : l'objet `data` est comme le schéma de l'état de votre composant. La déclaration de toutes les propriétés réactives dès le départ rend le code du composant plus facile à comprendre lorsqu'il sera re-visité ou lu par un autre développeur. |
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.
cela élimine toute une série de cas
[de mieux s'intégrer / de mieux concorder] avec les systèmes de vérification de type
Déclarer toutes les propriétés réactives dès le départ
lorsqu'il sera reparcouru plus tard
src/v2/guide/reactivity.md
Outdated
|
||
In case you haven't noticed yet, Vue performs DOM updates **asynchronously**. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop "tick", Vue flushes the queue and performs the actual (already de-duped) work. Internally Vue tries native `Promise.then` and `MutationObserver` for the asynchronous queuing and falls back to `setTimeout(fn, 0)`. | ||
Au cas où vous ne l'auriez pas encore remarqué, Vue effectue les mises à jour du DOM de façon **asynchrone**. Chaque fois qu'un changement de données est observé, cela ouvrira une file d'attente et mettra en mémoire toutes les modifications de données qui se sont produites dans la même boucle d'événement. Si le même observateur est déclenché plusieurs fois, il ne sera envoyé qu'une seule fois dans la file d'attente. Cette suppression des doublons en mémoire est primordiale car elle évite des calculs et des manipulations du DOM inutiles. Puis, lors du prochain « tour » (tick) de la boucle d'événement, Vue vide la file d'attente et effectue le travail (la suppression des doublons est déjà faite). Intérieurement Vue essaye les fonctions natives `Promise.then` et `MutationObserver` pour la file d'attente asynchrone et se rabat sur `setTimeout(fn, 0)` si ça ne fonctionne 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.
boucle d'événements ou boucle des événements (2 fois dans le paragraphe)
il ne sera ajouté qu'une seule fois
(déjà dédoublonné)
En interne, Vue essaie d'utiliser
si ça ne fonctionne pas => si elles ne sont pas supportées / si besoin est
src/v2/guide/reactivity.md
Outdated
|
||
For example, when you set `vm.someData = 'new value'`, the component will not re-render immediately. It will update in the next "tick", when the queue is flushed. Most of the time we don't need to care about this, but it can be tricky when you want to do something that depends on the post-update DOM state. Although Vue.js generally encourages developers to think in a "data-driven" fashion and avoid touching the DOM directly, sometimes it might be necessary to get your hands dirty. In order to wait until Vue.js has finished updating the DOM after a data change, you can use `Vue.nextTick(callback)` immediately after the data is changed. The callback will be called after the DOM has been updated. For example: | ||
Par exemple, lorsque vous définissez `vm.someData = 'nouvelle valeur'`, le composant ne sera pas rendu de nouveau immédiatement. Il se mettra à jour dans le prochain « tour » (tick), lorsque la file d'attente sera vidée. La plupart du temps nous n'avons pas besoin de nous en soucier, mais cela peut être délicat lorsque vous voulez faire quelque chose qui dépend de l'état du DOM après sa mise à jour. Bien que Vue.js encourage généralement les développeurs à penser d'un axe de « diriger par les données » (« data-driven ») en évitant de toucher le DOM directement, parfois il peut être nécessaire de se salir les mains. Pour attendre que Vue.js ait terminé la mise à jour du DOM après un changement de données, vous pouvez utiliser `Vue.nextTick (callback)` immédiatement après la modification des données. La fonction de retour sera appelée après que le DOM ait été mis à jour. 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.
Il se mettra à jour au prochain tour
à penser dans un mode « piloté par les données » (« data-driven »)
Afin d'attendre que
src/v2/guide/reactivity.md
Outdated
}) | ||
``` | ||
|
||
There is also the `vm.$nextTick()` instance method, which is especially handy inside components, because it doesn't need global `Vue` and its callback's `this` context will be automatically bound to the current Vue instance: | ||
Il y a aussi la méthode d'instance `vm.$nextTick()`, qui est particulièrement pratique à l'intérieur des composants, car il n'a pas besoin de la variable globale de `Vue` et le contexte `this` de sa fonction de retour sera automatiquement lié à l'instance courante 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.
car elle n'a pas besoin
à l'instance de Vue actuelle
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.
Top ! Juste deux point ou je crois qu'il faut mettre réactive à la place de réactif, je te laisse vérifier ! Après ça moi je passerai ma review en done :)
src/v2/guide/reactivity.md
Outdated
|
||
``` js | ||
var vm = new Vue({ | ||
data: { | ||
a: 1 | ||
} | ||
}) | ||
// `vm.a` is now reactive | ||
// `vm.a` est maintenant réactif |
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.
est maintenant réactive (la propriété)
src/v2/guide/reactivity.md
Outdated
|
||
vm.b = 2 | ||
// `vm.b` is NOT reactive | ||
// `vm.b` N'est PAS réactif |
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.
N'est PAS réactive
J'attends vos commentaires.
J'avoue que la traduction n'a pas toujours était facile (surtout la dernière partie), j'ai donc pas toujours fait une traduction littérale, à tort ou à raison, à vous de me le dire.