reactivity.md

src/v2/guide/reactivity.md

@@ -1,83 +1,81 @@
 ---
-title: Reactivity in Depth
+title: La réactivité dans le détail
 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 de Vue ! L'une des fonctionnalités les plus emblématiques de Vue est le système de réactivité non obstrusif. Les modèles sont simplement des objets JavaScript. Lorsque vous les modifiez, la vue se met à jour. Cela rend la gestion d'état très simple et intuitive, mais il est également important de comprendre comment cela fonctionne pour éviter quelques erreurs classiques. Dans cette section, nous allons nous pencher sur certains détails de bas niveau du système de réactivité de Vue.
 
-## How Changes Are Tracked
+## Comment les modifications sont tracées ?
 
-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 via 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.
 
-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 convertis sont logués, vous pouvez donc installer [vue-devtools](https://github.com/vuejs/vue-devtools) pour avoir une interface plus sympathique lors de l'inspection.
 
-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 comme dépendances toutes les propriétés « touchées » pendant le rendu du composant. 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.
 
 ![Reactivity Cycle](/images/data.png)
 
-## Change Detection Caveats
+## Limitations de la détection de changement
 
-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 de 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 en accesseur/mutateur lors de l'initialisation de l'instance, une propriété doit être présente dans l'objet `data` afin que Vue puisse la convertir et la rendre réactive. Par exemple :
 
 ``` js
 var vm = new Vue({
   data: {
     a: 1
   }
 })
-// `vm.a` is now reactive
-
+// `vm.a` est maintenant réactive
 vm.b = 2
-// `vm.b` is NOT reactive
+// `vm.b` N'est PAS réactive
 ```
-
-Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it's possible to add reactive properties to a nested object using the `Vue.set(object, key, value)` method:
+Vue n'autorise pas l'ajout dynamique de nouvelles propriétés réactives au niveau de la racine dans une instance déjà créée. Toutefois, il est possible d'ajouter des propriétés réactives à un objet imbriqué à l'aide de la méthode `Vue.set(object, key, value)` :
 
 ``` js
 Vue.set(vm.someObject, 'b', 2)
 ```
 
-You can also use the `vm.$set` instance method, which is just an alias to the global `Vue.set`:
+Vous pouvez aussi utiliser la méthode d'instance `vm.$set`, qui est juste un alias de la méthode globale `Vue.set` :
 
 ``` js
 this.$set(this.someObject, 'b', 2)
 ```
 
-Sometimes you may want to assign a number of properties to an existing object, for example using `Object.assign()` or `_.extend()`. However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object:
+Parfois vous voudrez affecter un certain nombre de propriétés à un objet existant, par exemple à l'aide de `Object.assign()` ou `_.extend()`. Pourtant, les nouvelles propriétés ajoutées à l'objet ne déclencheront pas de changements. Dans de tels cas, créez un nouvel objet avec à la fois les propriétés de l'objet d'origine et celles de l'objet à intégrer :
 
 ``` js
-// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
+// Au lieu de `Object.assign(this.someObject, { a: 1, b: 2 })`
 this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
 ```
 
-There are also a few array-related caveats, which were discussed earlier in the [list rendering section](list.html#Caveats).
+Il y a également quelques limitations liées aux tableaux, qui ont été expliquées précédemment dans la [section du rendu de liste](list.html#Limitations).
 
-## Declaring Reactive Properties
+## Déclaration de propriétés réactives
 
-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 dès le départ toutes les propriétés des données réactives au niveau de la racine, même avec juste une valeur vide :
 
 ``` js
 var vm = new Vue({
   data: {
-    // declare message with an empty value
+    // déclare message avec une valeur vide
     message: ''
   },
   template: '<div>{{ message }}</div>'
 })
-// set `message` later
-vm.message = 'Hello!'
+// définit plus tard `message`
+vm.message = 'Bonjour !'
 ```
 
-If you don't declare `message` in the data option, Vue will warn you that the render function is trying to access a property that doesn't exist.
+Si vous ne déclarez pas `message` dans l'option data, Vue vous avertira que la fonction de rendu tente d'accéder à une propriété qui n'existe pas.
 
-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 toute une série de cas particuliers dans le système de suivi, et permet également aux instances de Vue de mieux s'intégrer 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. Déclarer toutes les propriétés réactives dès le départ rend le code du composant plus facile à comprendre lorsqu'il sera reparcouru plus tard ou lu par un autre développeur.
 
-## Async Update Queue
+## File d'attente de mise à jour asynchrone
 
-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 des événements. Si le même observateur est déclenché plusieurs fois, il ne sera ajouté 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 des événements, Vue vide la file d'attente et effectue le travail (déjà dédoublonné). En interne, Vue essaie d'utiliser les fonctions natives `Promise.then` et `MutationObserver` pour la file d'attente asynchrone et se rabat sur `setTimeout(fn, 0)` si elles ne sont pas supportées. 
 
-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 au 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 dans un mode « piloté par les données » (« data-driven ») en évitant de toucher le DOM directement, parfois il peut être nécessaire de se salir les mains. Afin d'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 :
 
 ``` html
 <div id="example">{{ message }}</div>
@@ -90,29 +88,29 @@ var vm = new Vue({
     message: '123'
   }
 })
-vm.message = 'new message' // change data
-vm.$el.textContent === 'new message' // false
+vm.message = 'nouveau message' // change les données
+vm.$el.textContent === 'nouveau message' // false
 Vue.nextTick(function () {
-  vm.$el.textContent === 'new message' // true
+  vm.$el.textContent === 'nouveau message' // true
 })
 ```
 
-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 elle n'a pas besoin de la variable globale de `Vue` et le contexte `this` de sa fonction de retour sera automatiquement lié à l'instance de Vue actuelle :
 
 ``` js
 Vue.component('example', {
   template: '<span>{{ message }}</span>',
   data: function () {
     return {
-      message: 'not updated'
+      message: 'pas mis à jour'
     }
   },
   methods: {
     updateMessage: function () {
-      this.message = 'updated'
-      console.log(this.$el.textContent) // => 'not updated'
+      this.message = 'mis à jour'
+      console.log(this.$el.textContent) // => 'pas mis à jour'
       this.$nextTick(function () {
-        console.log(this.$el.textContent) // => 'updated'
+        console.log(this.$el.textContent) // => 'mis à jour'
       })
     }
   }