**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).**
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.  -## 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({ @@ -26,58 +26,56 @@ var vm = new Vue({ 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: '