Merge pull request #220 from kevinbreaker/master

Translating "api/composition-api.md"

Author: GuiDevloper

src/api/composition-api.md

@@ -1,17 +1,17 @@
-# Composition API
+# API de Composição
 
-> This section uses [single-file component](../guide/single-file-component.html) syntax for code examples
+> Esta seção usa a sintaxe de [Componentes Single-File](../guide/single-file-component.html) como exemplos de códigos
 
 ## `setup`
 
-A component option that is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's
+Uma opção de componente que é executada **antes** do componente ser criado, uma vez que as `props` são resolvidas, e serve como um ponto de entrada para a *API* de composição
 
-- **Arguments:**
+- **Argumentos:**
 
   - `{Data} props`
   - `{SetupContext} context`
 
-- **Typing**:
+- **Tipagem**:
 
 ```ts
 interface Data {
@@ -27,13 +27,13 @@ interface SetupContext {
 function setup(props: Data, context: SetupContext): Data
 ```
 
-::: tip
-To get type inference for the arguments passed to `setup()`, the use of [defineComponent](global-api.html#definecomponent) is needed.
+::: tip Dica
+Para obter a inferência de tipos para os argumentos passados para o `setup()`, é necessário o uso do [defineComponent](global-api.html#definecomponent).
 :::
 
-- **Example**
+- **Exemplo**
 
-  With the template:
+  Com o *template*:
 
   ```vue-html
   <!-- MyBook.vue -->
@@ -47,9 +47,9 @@ To get type inference for the arguments passed to `setup()`, the use of [defineC
     export default {
       setup() {
         const readersNumber = ref(0)
-        const book = reactive({ title: 'Vue 3 Guide' })
+        const book = reactive({ title: 'Guia do Vue 3' })
 
-        // expose to template
+        // Expõe para o template
         return {
           readersNumber,
           book
@@ -59,7 +59,7 @@ To get type inference for the arguments passed to `setup()`, the use of [defineC
   </script>
   ```
 
-  With render function:
+  Com função de renderização:
 
   ```js
   // MyBook.vue
@@ -69,43 +69,42 @@ To get type inference for the arguments passed to `setup()`, the use of [defineC
   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
+      const book = reactive({ title: 'Guia do Vue 3' })
+      // Observe que precisamos expor explicitamente o valor do "ref" aqui.
       return () => h('div', [readersNumber.value, book.title])
     }
   }
   ```
 
-- **See also**: [Composition API `setup`](../guide/composition-api-setup.html)
+- **Veja também**: [`setup` da API de Composição](../guide/composition-api-setup.html)
 
-## Lifecycle Hooks
+## Gatilhos de Ciclo de Vida
 
-Lifecycle hooks can be registered with directly-imported `onX` functions:
+Os gatilhos de ciclo de vida podem ser registrados com funções `onX` importadas diretamente:
 
 ```js
 import { onMounted, onUpdated, onUnmounted } from 'vue'
 
 const MyComponent = {
   setup() {
     onMounted(() => {
-      console.log('mounted!')
+      console.log('Montado!')
     })
     onUpdated(() => {
-      console.log('updated!')
+      console.log('Atualizado!')
     })
     onUnmounted(() => {
-      console.log('unmounted!')
+      console.log('Desmontado!')
     })
   }
 }
 ```
 
-These lifecycle hook registration functions can only be used synchronously during [`setup()`](#setup), since they rely on internal global state to locate the current active instance (the component instance whose `setup()` is being called right now). Calling them without a current active instance will result in an error.
+Essas funções de registro de gatilhos de ciclo de vida somente podem ser usadas de forma síncrona durante o [`setup()`](#setup), já que elas dependem do estado global para localizar a instância ativa atual (a instância do componente onde o `setup()` está sendo chamado agora). Chamá-los sem uma instância ativa resultará em um erro.
 
-The component instance context is also set during the synchronous execution of lifecycle hooks. As a result, watchers and computed properties created synchronously inside of lifecycle hooks are also automatically tore down when the component unmounts.
-
-- **Mapping between Options API Lifecycle Options and Composition API**
+O contexto da instância do componente também é definido durante a execução síncrona dos gatilhos de ciclo de vida. Como resultado, os observadores e os dados computados criados de forma síncrona dentro dos gatilhos de ciclo de vida também são destruídos automaticamente quando o componente é desmontado.
 
+- **Mapeamento das Opções de Ciclo de Vida entre a API de Opções e API de Composição**
   - ~~`beforeCreate`~~ -> use `setup()`
   - ~~`created`~~ -> use `setup()`
   - `beforeMount` -> `onBeforeMount`
@@ -118,50 +117,50 @@ The component instance context is also set during the synchronous execution of l
   - `renderTracked` -> `onRenderTracked`
   - `renderTriggered` -> `onRenderTriggered`
 
-- **See also**: [Composition API lifecycle hooks](../guide/composition-api-lifecycle-hooks.html)
+- **Veja também**: [Gatilhos de ciclo de vida da API de Composição](../guide/composition-api-lifecycle-hooks.html)
 
-## Provide / Inject
+## Prover / Injetar
 
-`provide` and `inject` enables dependency injection. Both can only be called during [`setup()`](#setup) with a current active instance.
+`provide` e `inject` ativam a injeção de dependência. Ambos só podem ser chamados durante o [`setup()`](#setup) com uma instância atual ativa.
 
-- **Typing**:
+- **Tipagem**:
 
 ```ts
 interface InjectionKey<T> extends Symbol {}
 
 function provide<T>(key: InjectionKey<T> | string, value: T): void
 
-// without default value
+// Sem valor padrão
 function inject<T>(key: InjectionKey<T> | string): T | undefined
-// with default value
+// Com valor padrão
 function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
 ```
 
-Vue provides an `InjectionKey` interface which is a generic type that extends `Symbol`. It can be used to sync the type of the injected value between the provider and the consumer:
+O Vue fornece uma interface `InjectionKey` que é um tipo genérico que estende de `Symbol`. Isso pode ser usado para sincronizar o tipo do valor injetado entre o provedor e consumidor:
 
 ```ts
 import { InjectionKey, provide, inject } from 'vue'
 
 const key: InjectionKey<string> = Symbol()
 
-provide(key, 'foo') // providing non-string value will result in error
+provide(key, 'foo') // Prover um valor que não seja string resultará em um erro.
 
-const foo = inject(key) // type of foo: string | undefined
+const foo = inject(key) // tipo de foo: string | undefined
 ```
 
-If using string keys or non-typed symbols, the type of the injected value will need to be explicitly declared:
+Se estiver usando chaves do tipo String ou Symbols não tipados, o tipo do valor injetado precisará ser declarado explicitamente:
 
 ```ts
 const foo = inject<string>('foo') // string | undefined
 ```
 
-- **See also**:
-  - [Provide / Inject](../guide/component-provide-inject.html)
-  - [Composition API Provide / Inject](../guide/composition-api-provide-inject.html)
+- **Veja também**:
+  - [Prover e Injetar Dados](../guide/component-provide-inject.html)
+  - [Prover e Injetar Dados na API de Composição](../guide/composition-api-provide-inject.html)
 
 ## `getCurrentInstance`
 
-`getCurrentInstance` enables access to an internal component instance useful for advanced usages or for library creators.
+`getCurrentInstance` permite acesso a uma instância interna do componente, útil para usos mais avançados ou para criadores de bibliotecas.
 
 ```ts
 import { getCurrentInstance } from 'vue'
@@ -170,31 +169,31 @@ const MyComponent = {
   setup() {
     const internalInstance = getCurrentInstance()
 
-    internalInstance.appContext.config.globalProperties // access to globalProperties
+    internalInstance.appContext.config.globalProperties // acesso a globalProperties
   }
 }
 ```
 
-`getCurrentInstance` **only** works during [setup](#setup) or [Lifecycle Hooks](#lifecycle-hooks)
+`getCurrentInstance` funciona **apenas** durante o [setup](#setup) ou [Gatilhos de Ciclo de vida](#gatilhos-de-ciclo-de-vida)
 
-> When using outside of [setup](#setup) or [Lifecycle Hooks](#lifecycle-hooks), please call `getCurrentInstance()` on `setup` and use the instance instead.
+> Quando usado fora do [setup](#setup) ou [Gatilhos de Ciclo de vida](#gatilhos-de-ciclo-de-vida), chame o `getCurrentInstance()` no `setup` e use a instância em seu lugar.
 
 ```ts
 const MyComponent = {
   setup() {
-    const internalInstance = getCurrentInstance() // works
+    const internalInstance = getCurrentInstance() // Funciona
 
-    const id = useComponentId() // works
+    const id = useComponentId() // Funciona
 
     const handleClick = () => {
-      getCurrentInstance() // doesn't work
-      useComponentId() // doesn't work
+      getCurrentInstance() // Não funciona
+      useComponentId() // Não funciona
 
-      internalInstance // works
+      internalInstance // Funciona
     }
 
     onMounted(() => {
-      getCurrentInstance() // works
+      getCurrentInstance() // Funciona
     })
 
     return () =>
@@ -208,7 +207,7 @@ const MyComponent = {
   }
 }
 
-// also works if called on a composable
+// Também funciona se chamado em uma composição
 function useComponentId() {
   return getCurrentInstance().uid
 }

src/guide/component-template-refs.md

@@ -1,4 +1,4 @@
-# _refs_ de Template
+# *refs*  de Template
 
 > Esta página assume que você já leu o [Básico de Componentes](component-basics.md). Leia lá primeiro se você for novo em componentes.
 
@@ -38,7 +38,7 @@ Além disso, você pode adicionar outro `ref` ao próprio componente e usá-lo p
 this.$refs.usernameInput.focusInput()
 ```
 
-::: warning
+::: warning Atenção
 `$refs` é preenchido apenas após o componente ter sido renderizado. Isso serve apenas como uma saída de emergência para a manipulação direta de elementos filhos - você deve evitar acessar `$refs` de dentro de _templates_ ou dados computados.
 :::