Merge pull request #142 from rodgeraraujo/docs/guide-reactivity-fundamentals

docs: translates guide/reactivity-fundamentals to pt-BR

Author: GuiDevloper

src/guide/reactivity-fundamentals.md

@@ -1,37 +1,37 @@
-# Reactivity Fundamentals
+# Fundamentos da Reatividade
 
-## Declaring Reactive State
+## Declarando Estado Reativo
 
-To create a reactive state from a JavaScript object, we can use a `reactive` method:
+Para criar um estado reativo a partir de um objeto JavaScript, podemos usar o método `reactive`:
 
 ```js
 import { reactive } from 'vue'
 
-// reactive state
+// estado reativo
 const state = reactive({
   count: 0
 })
 ```
 
-`reactive` is the equivalent of the `Vue.observable()` API in Vue 2.x, renamed to avoid confusion with RxJS observables. Here, the returned state is a reactive object. The reactive conversion is "deep" - it affects all nested properties of the passed object.
+`reactive` é equivalente à API `Vue.observable()` do Vue 2.x, renomeado para evitar confusões com os `Observables` do RxJS. Aqui, o estado retornado é um objeto reativo. A conversão reativa é "profunda" - ela afeta todas as propriedades aninhadas do objeto passado.
 
-The essential use case for reactive state in Vue is that we can use it during render. Thanks to dependency tracking, the view automatically updates when reactive state changes.
+O caso de uso essencial para o estado reativo no Vue é que podemos usá-lo durante a renderização. Graças ao rastreamento de dependência, a exibição é atualizada automaticamente quando o estado reativo muda.
 
-This is the very essence of Vue's reactivity system. When you return an object from `data()` in a component, it is internally made reactive by `reactive()`. The template is compiled into a [render function](render-function.html) that makes use of these reactive properties.
+Esta é a própria essência do sistema de reatividade do Vue. Quando você retorna um objeto de `data()` em um componente, ele é tornado reativo internamente pelo `reactive()`. O _template_ é compilado em uma [função de renderização](render-function.html) que faz uso dessas propriedades reativas.
 
-You can learn more about `reactive` in the [Basic Reactivity API's](../api/basic-reactivity.html) section
+Você pode aprender mais sobre `reactive` na seção [Básico da API de Reatividade](../api/basic-reactivity.html)
 
-## Creating Standalone Reactive Values as `refs`
+## Criação de Valores Reativos Avulsos como `refs`
 
-Imagine the case where we have a standalone primitive value (for example, a string) and we want to make it reactive. Of course, we could make an object with a single property equal to our string, and pass it to `reactive`. Vue has a method that will do the same for us - it's a `ref`:
+Imagine o caso em que temos um valor primitivo avulso (por exemplo, uma string) e queremos torná-la reativa. Claro, poderíamos fazer um objeto com uma única propriedade igual à nossa string e passá-la para `reactive`. Vue tem um método que fará o mesmo para nós - ele é o `ref`:
 
 ```js
 import { ref } from 'vue'
 
 const count = ref(0)
 ```
 
-`ref` will return a reactive and mutable object that serves as a reactive **ref**erence to the internal value it is holding - that's where the name comes from. This object contains the only one property named `value`:
+`ref` retornará um objeto reativo e mutável que serve como uma **ref**erência reativa para o valor interno que está mantendo - é daí que vem o seu nome. Este objeto contém uma única propriedade chamada `value`:
 
 ```js
 import { ref } from 'vue'
@@ -43,15 +43,15 @@ count.value++
 console.log(count.value) // 1
 ```
 
-### Ref Unwrapping
+### Ref Desempacotada
 
-When a ref is returned as a property on the render context (the object returned from [setup()](composition-api-setup.html)) and accessed in the template, it automatically unwraps to the inner value. There is no need to append `.value` in the template:
+Quando um `ref` é retornado como uma propriedade no contexto de renderização (o objeto retornado de [setup()](composition-api-setup.html)) e acessado no _template_, ele se desempacota automaticamente para o valor interno. Não há necessidade de anexar `.value` no _template_:
 
 ```vue-html
 <template>
   <div>
     <span>{{ count }}</span>
-    <button @click="count ++">Increment count</button>
+    <button @click="count++">Incrementar contador</button>
   </div>
 </template>
 
@@ -68,9 +68,9 @@ When a ref is returned as a property on the render context (the object returned
 </script>
 ```
 
-### Access in Reactive Objects
+### Acesso em Objetos Reativos
 
-When a `ref` is accessed or mutated as a property of a reactive object, it automatically unwraps to the inner value so it behaves like a normal property:
+Quando um `ref` é acessado ou alterado como uma propriedade de um objeto reativo, ele se desempacota automaticamente para o valor interno para que se comporte como uma propriedade normal:
 
 ```js
 const count = ref(0)
@@ -84,7 +84,7 @@ state.count = 1
 console.log(count.value) // 1
 ```
 
-If a new ref is assigned to a property linked to an existing ref, it will replace the old ref:
+Se uma nova `ref` for atribuída à uma propriedade vinculada à uma `ref` existente, ela substituirá a antiga ref:
 
 ```js
 const otherCount = ref(2)
@@ -94,60 +94,60 @@ console.log(state.count) // 2
 console.log(count.value) // 1
 ```
 
-Ref unwrapping only happens when nested inside a reactive `Object`. There is no unwrapping performed when the ref is accessed from an `Array` or a native collection type like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map):
+O desempacotamento de um `ref` só acontece quando aninhado dentro de um `Object` reativo. Não há desempacotamento executado quando o `ref` é acessado de um `Array` ou um tipo de coleção nativo como [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map):
 
 ```js
-const books = reactive([ref('Vue 3 Guide')])
-// need .value here
+const books = reactive([ref('Guia do Vue 3')])
+// precisa usar .value aqui
 console.log(books[0].value)
 
 const map = reactive(new Map([['count', ref(0)]]))
-// need .value here
+// precisa usar .value aqui
 console.log(map.get('count').value)
 ```
 
-## Destructuring Reactive State
+## Desestruturar Estado Reativo
 
-When we want to use a few properties of the large reactive object, it could be tempting to use [ES6 destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to get properties we want:
+Quando queremos usar algumas propriedades do grande objeto reativo, pode ser tentador usar [desestruturação do ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) para obter as propriedades que desejamos:
 
 ```js
 import { reactive } from 'vue'
 
 const book = reactive({
-  author: 'Vue Team',
+  author: 'Equipe Vue',
   year: '2020',
-  title: 'Vue 3 Guide',
-  description: 'You are reading this book right now ;)',
-  price: 'free'
+  title: 'Guia do Vue 3',
+  description: 'Você está lendo esta documentação agora ;)',
+  price: 'grátis'
 })
 
 let { author, title } = book
 ```
 
-Unfortunately, with such a destructuring the reactivity for both properties would be lost. For such a case, we need to convert our reactive object to a set of refs. These refs will retain the reactive connection to the source object:
+Infelizmente, com tal desestruturação, a reatividade para ambas as propriedades seria perdida. Para tal, precisamos converter nosso objeto reativo em um conjunto de refs. Esses refs manterão a conexão reativa com o objeto de origem:
 
 ```js
 import { reactive, toRefs } from 'vue'
 
 const book = reactive({
-  author: 'Vue Team',
+  author: 'Equipe Vue',
   year: '2020',
-  title: 'Vue 3 Guide',
-  description: 'You are reading this book right now ;)',
-  price: 'free'
+  title: 'Guia do Vue 3',
+  description: 'Você está lendo esta documentação agora ;)',
+  price: 'grátis'
 })
 
 let { author, title } = toRefs(book)
 
-title.value = 'Vue 3 Detailed Guide' // we need to use .value as title is a ref now
-console.log(book.title) // 'Vue 3 Detailed Guide'
+title.value = 'Guia detalhado do Vue 3' // precisamos usar .value porque `title` é uma `ref` agora
+console.log(book.title) // 'Guia detalhado do Vue 3'
 ```
 
-You can learn more about `refs` in the [Refs API](../api/refs-api.html#ref) section
+Você pode aprender mais sobre `refs` na seção [API de Refs](../api/refs-api.html#ref)
 
-## Prevent Mutating Reactive Objects with `readonly`
+## Evite Mutar Objetos Reativos com `readonly`
 
-Sometimes we want to track changes of the reactive object (`ref` or `reactive`) but we also want prevent changing it from a certain place of the application. For example, when we have a [provided](component-provide-inject.html) reactive object, we want to prevent mutating it where it's injected. To do so, we can create a readonly proxy to the original object:
+Às vezes, queremos rastrear as alterações do objeto reativo (`ref` ou` reactive`), mas também queremos evitar alterá-lo de um determinado local do aplicativo. Por exemplo, quando temos um objeto reativo [provido](component-provide-inject.html), queremos evitar a sua mutação onde ele é injetado. Para fazer isso, podemos criar um _proxy_ somente leitura (readonly) para o objeto original:
 
 ```js
 import { reactive, readonly } from 'vue'
@@ -156,9 +156,9 @@ const original = reactive({ count: 0 })
 
 const copy = readonly(original)
 
-// mutating original will trigger watchers relying on the copy
+// a mutação do original fará com que os observadores confiem na cópia
 original.count++
 
-// mutating the copy will fail and result in a warning
+// alterar a cópia irá falhar e resultar em um aviso
 copy.count++ // warning: "Set operation on key 'count' failed: target is readonly."
 ```