traducao ate a 109

Author: LucasFlaquer

src/guide/change-detection.md

@@ -1,64 +1,64 @@
-# Change Detection Caveats in Vue 2
+# Advertência de Alterações Detectadas no Vue 2
 
-> This page applies only to Vue 2.x and below, and assumes you've already read the [Reactivity Section](reactivity.md). Please read that section first.
+> Esta página se aplica apenas para o Vue 2.x e inferiores, e assume que você já tenha lido a [Seção de Reatividade](reactivity.md). Por favor leia esta seção primeiro.
 
-Due to limitations in JavaScript, there are types of changes that Vue **cannot detect**. However, there are ways to circumvent them to preserve reactivity.
+Devido a limitações no Javascript, existem alguns tipos de mudanças que o Vue **não consegue detectar**. No entanto, existem formas de contorná-las para preservar a reatividade.
 
-### For Objects
+### Para *Objects*
 
-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:
+Vue não consegue detectar a inserçãoa ou remoção de propriedades. Como o Vue realiza o processo de conversão *getter*/*setter* durante a inicialização da instância, uma propriedade precisa estar presente no objeto `data` para que o Vue possa convertê-lo e torná-lo reativo. Por exemplo:
 
 ```js
 var vm = new Vue({
   data: {
     a: 1
   }
 })
-// `vm.a` is now reactive
+// `vm.a` agora é reativa
 
 vm.b = 2
-// `vm.b` is NOT reactive
+// `vm.b` não é reativa
 ```
 
-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, propertyName, value)` method:
+Vue não permite adicionar dinamicamente novas propriedades nível-raiz (*root-level*) a uma instância já criada. Contudo, é possível adicionar propriedades reativaas a um objeto aninhado usando o método `Vue.set(object, propertyName, value)`:
 
 ```js
 Vue.set(vm.someObject, 'b', 2)
 ```
 
-You can also use the `vm.$set` instance method, which is an alias to the global `Vue.set`:
+Você pode também utilizar o método da instância `vm.$set`, que é uma referência ao método global `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:
+Às vezes você pode querer atribuir mais de uma propriedade para um objeto existente, por exemplo usando `Object.assign()` ou `_.extend()`. No entanto, novas propriedades addicionadas ao objeto não irão acionar mudanças. Nestes casos, crie um objeto novo (*fresh object*) com propriedades de ambos o origial e o alterado (*mixing object*):
 
 ```js
-// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
+// invés de `Object.assign(this.someObject, { a: 1, b: 2 })`
 this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
 ```
 
-### For Arrays
+### Para *Arrays*
 
-Vue cannot detect the following changes to an array:
+Vue não consegue detectar as seguintes mudanças em um *array*:
 
-1. When you directly set an item with the index, e.g. `vm.items[indexOfItem] = newValue`
-2. When you modify the length of the array, e.g. `vm.items.length = newLength`
+1. Quando você atribuir diretamente um item através do índice, e.g. `vm.items[indexOfItem] = newValue`
+2. Quando você modifica o comprimento de um *array*, e.g. `vm.items.length = newLength`
 
-For example:
+Por exemplo:
 
 ```js
 var vm = new Vue({
   data: {
     items: ['a', 'b', 'c']
   }
 })
-vm.items[1] = 'x' // is NOT reactive
-vm.items.length = 2 // is NOT reactive
+vm.items[1] = 'x' // NÃO é reativo
+vm.items.length = 2 // NÃO é reativo
 ```
 
-To overcome caveat 1, both of the following will accomplish the same as `vm.items[indexOfItem] = newValue`, but will also trigger state updates in the reactivity system:
+Para contornar a advertência 1, ambas instruções irão fazer o mesmo que `vm.items[indexOfItem] = newValue`, mas irão também acionar as atualizações no estado do sistema reativo:
 
 ```js
 // Vue.set
@@ -70,42 +70,43 @@ Vue.set(vm.items, indexOfItem, newValue)
 vm.items.splice(indexOfItem, 1, newValue)
 ```
 
-You can also use the [`vm.$set`](https://vuejs.org/v2/api/#vm-set) instance method, which is an alias for the global `Vue.set`:
+Você pode também usar o método [`vm.$set`](https://vuejs.org/v2/api/#vm-set) da instância que é uma referência ao método global `Vue.set`:
 
 ```js
 vm.$set(vm.items, indexOfItem, newValue)
 ```
 
-To deal with caveat 2, you can use `splice`:
+Para lidar com a advertência 2, você pode usar o método `splice`:
 
 ```js
 vm.items.splice(newLength)
 ```
 
-## Declaring Reactive Properties
+## Declarando Propriedades Reativas
 
-Since Vue doesn't allow dynamically adding root-level reactive properties, you have to initialize component instances by declaring all root-level reactive data properties upfront, even with an empty value:
+Como o Vue não permite inserir propriedades de nível raíz (*root-level*) dinamicamente, você tem que inicializar a instância de um componente declarando todas as propriedades de nível raíz (*root-level*) já inicializadas, mesmo que com valores vazios:
 
 ```js
 var vm = new Vue({
   data: {
-    // declare message with an empty value
+    // declara message com o valor vazio
     message: ''
   },
   template: '<div>{{ message }}</div>'
 })
-// set `message` later
+// atribui valor a `message` posteriormente
 vm.message = 'Hello!'
 ```
 
-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.
+Se você não declarar a propriedade `message` no objeto data, Vue irá avisar você que a função *render* está tenntando acessar uma propriedade que não exite.
 
-There are technical reasons behind this restriction - it eliminates a class of edge cases in the dependency tracking system, and also makes component 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.
+Existem razões técnicas por tráz desta restrição - elas eliminam um conjunto de casos extremos no sistema de rastreamento de dependências, além de fazer com que as istâncias dos componenntes funcionem melhor com o sistema de checagem de tipo. Porém há também uma consideração importante em termos de manutennção de código: o objeto `data` funciona como um *schema* para o estado do seu componente. Declarando todas as propriedades reativas inicialmente faz com que o código do componente seja mais fácil de entender quando revisitado posteriormente ou lido po outro desenvolvedor.
 
-## Async Update Queue
+## Fila de Atualização Assíncrona (*Async Update Queue*)
 
-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`, `MutationObserver`, and `setImmediate` for the asynchronous queuing and falls back to `setTimeout(fn, 0)`.
+No caso de você não ter notado ainda, Vue realiza atualizações na DOM de forma **assíncrona**. Sempre que uma mudança de dados é observada, é aberta uma fila e armazenado em *buffer* todas as alterações que ocorreram no mesmo ciclo (*event loop*). Se o mesmo observador é acionado muitas vezes, ele será inserido na fila apenas uma vez. Essa eliminação de duplicatas em *buffer* é importante para evitar cálculos e manipulações da DOM desnecessários. Então, no próximo ciclo *"tick"*, Vue limpla a fila e executa o trabalho atual (já desduplicado). Internamente Vue tenta utilizar nativamente `Promise.then`, `MutationObserver`, e `setImmediate` para a enfileiração e retorna para o `setTimeout(fn, 0)`.
 
+Por exemplo, quando você atribui `vm.someData = 'new value'`, o componente não irá renderizar novamente de imadiato.
 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:
 
 ```html