Docs: translate composition-api-setup

Author: viniciusarre

src/guide/composition-api-setup.md

@@ -1,21 +1,22 @@
-# Setup
+# Configuração
 
-> This section uses [single-file component](single-file-component.html) syntax for code examples
+> Esta seção usa a sintaxe de [componente de um arquivo](single-file-component.html) para exemplos de código.
 
-> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API.
+> Este guia assume que você já leu a [Introdução à API de Composição](composition-api-introduction.html) e [Fundamentos de Reatividade](reactivity-fundamentals.html). Leia-os primeiros se você é novo à API de composição (Composition API).
 
-## Arguments
+## Argumentos 
 
-When using the `setup` function, it will take two arguments:
+Ao usar a função `setup`, ela receberá dois argumentos:
 
 1. `props`
 2. `context`
-
-Let's dive deeper into how each argument can be used.
+   
+Vamos nos aprofundar em como cada argumento pode ser usado.
 
 ### Props
 
-The first argument in the `setup` function is the `props` argument. Just as you would expect in a standard component, `props` inside of a `setup` function are reactive and will be updated when new props are passed in.
+O primeiro argumento da função `setup` é o argumento `props`. Assim como é de se esperar em um componente padrão, `props` dentro de uma função `setup` são reativos e serão atualizados quando novos props são passados.
+
 
 ```js
 // MyBook.vue
@@ -29,12 +30,11 @@ export default {
   }
 }
 ```
-
 :::warning
-However, because `props` are reactive, you **cannot use ES6 destructuring** because it will remove props reactivity.
+No entanto, porque os `props` são reativos, você **não pode usar desestruturação de objetos com ES6** porque isso vai remover sua reatividade.
 :::
 
-If you need to destructure your props, you can do this safely by utilizing the [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) inside of the `setup` function.
+Se você precisa desestruturar seus props, você o pode fazer seguramente usando o [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) dentro da função `setup`.
 
 ```js
 // MyBook.vue
@@ -47,10 +47,10 @@ setup(props) {
 	console.log(title.value)
 }
 ```
+### Contexto 
 
-### Context
+O segundo argumento passado para a função `setup` é o `contexto`. O `contexto` é um objeto Javascript normal que expõe três propriedades do componente:
 
-The second argument passed to the `setup` function is the `context`. The `context` is a normal JavaScript object that exposes three component properties:
 
 ```js
 // MyBook.vue
@@ -69,7 +69,7 @@ export default {
 }
 ```
 
-The `context` object is a normal JavaScript object, i.e., it is not reactive, this means you can safely use ES6 destructuring on `context`.
+O objeto `contexto` é um objeto normal Javascript (ou seja, não é reativo, o que significa que você pode seguramente utilizar a desestruturação ES6 nele)
 
 ```js
 // MyBook.vue
@@ -79,60 +79,60 @@ export default {
   }
 }
 ```
+`attrs` e `slots` são objetos com estados que sempre são atualizados quando o componente é atualizado. Isso significa que você deve evitar desestruturá-los e sempre referenciar suas propriedades por meio de `attrs.x` ou `slots.x`. Note também que, diferente de `props`, `attrs` e `slots` não são reativos. Se você busca aplicar efeitos baseados em mudanças nos `attrs` ou `slots`, você deveria fazê-lo dentro do hook de ciclo de vida `onUpdate`.
 
-`attrs` and `slots` are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as `attrs.x` or `slots.x`. Also note that unlike `props`, `attrs` and `slots` are **not** reactive. If you intend to apply side effects based on `attrs` or `slots` changes, you should do so inside an `onUpdated` lifecycle hook.
-
-## Accessing Component Properties
+## Accessando propriedades de componentes
 
-When `setup` is executed, the component instance has not been created yet. As a result, you will only be able to access the following properties:
+Quando o `setup` é executado, a instância do componente ainda não foi criada. Como resultado, você somente poderá acessar as seguintes propriedades:
 
 - `props`
 - `attrs`
 - `slots`
 - `emit`
 
-In other words, you **will not have access** to the following component options:
+Em outras palavras, você **não terá acesso** às seguintes opções de componentes:
 
 - `data`
 - `computed`
 - `methods`
 
-## Usage with Templates
+## Usos com os Templates
+
+Se `setup` retorna um objeto, as propriedades no objeto podem ser acessadas no template do componente, assim como as propriedades do `props` passadas para o `setup`:
 
 If `setup` returns an object, the properties on the object can be accessed in the component's template, as well as the properties of the `props` passed into `setup`:
 
 ```vue-html
 <!-- MyBook.vue -->
 <template>
-  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
+  <div>{{ nomeDaColecao }}: {{ numeroDeLeitores }} {{ livro.titulo }}</div>
 </template>
 
 <script>
   import { ref, reactive } from 'vue'
 
   export default {
     props: {
-      collectionName: String
+      nomeDaColecao: String
     },
     setup(props) {
-      const readersNumber = ref(0)
-      const book = reactive({ title: 'Vue 3 Guide' })
+      const numeroDeLeitores = ref(0)
+      const livro = reactive({ titulo: 'Vue 3 Guide' })
 
       // expose to template
       return {
-        readersNumber,
-        book
+        numeroDeLeitores,
+        livro
       }
     }
   }
 </script>
 ```
+Note que [refs](../api/refs-api.html#ref) que é retornado do `setup` é [automaticamente desestruturado](/guide/reactivity-fundamentals.html#ref-unwrapping) quando acessado no template, portanto você não deveria usar `.value` nos templates.
 
-Note that [refs](../api/refs-api.html#ref) returned from `setup` are [automatically unwrapped](/guide/reactivity-fundamentals.html#ref-unwrapping) when accessed in the template so you shouldn't use `.value` in templates.
-
-## Usage with Render Functions
+## Uso com funções de renderização
 
-`setup` can also return a render function which can directly make use of the reactive state declared in the same scope:
+`setup` pode, inclusive, retornar uma função de renderização que pode diretamente fazer uso do estado reativo declarado no mesmo escopo:
 
 ```js
 // MyBook.vue
@@ -141,14 +141,13 @@ import { h, ref, reactive } from 'vue'
 
 export default {
   setup() {
-    const readersNumber = ref(0)
-    const book = reactive({ title: 'Vue 3 Guide' })
-    // Please note that we need to explicitly expose ref value here
-    return () => h('div', [readersNumber.value, book.title])
+    const numeroDeLeitores = ref(0)
+    const livro = reactive({ titulo: 'Vue 3 Guide' })
+    // Por favor, note que precisamos explicitamente expor o valor de ref aqui
+    return () => h('div', [readersNumber.value, book.titulo])
   }
 }
 ```
+# Uso de `this`
 
-## Usage of `this`
-
-**Inside `setup()`, `this` won't be a reference to the current active instance** Since `setup()` is called before other component options are resolved, `this` inside `setup()` will behave quite differently from `this` in other options. This might cause confusions when using `setup()` along other Options API.
+**Dentro de `setup()`, `this` não será uma referência à instância atualmente ativa**. Já que `setup()` é chamado antes que as outras opções do componente são resolvidas, `this` dentro de `setup()` vai se comportar diferentemente do `this` noutras opções. Isso pode causar confusões ao se usar o `setup()` com outras API de Opções.