Review in guide/render-function

GuiDevloper · GuiDevloper · commit b1e23472add6 · 2021-02-02T21:45:47.000-03:00
diff --git a/src/guide/render-function.md b/src/guide/render-function.md
@@ -1,24 +1,24 @@
 # Funções de Renderização
 
-Vue recomenda o uso de templates para construir aplicações na grande maioria dos casos. No entanto, existem situações onde precisamos de todo o poder programático do JavaScript. É aí onde podemos utilizar a **função de renderização**.
+Vue recomenda o uso de _templates_ para construir aplicações na grande maioria dos casos. No entanto, existem situações onde precisamos de todo o poder programático do JavaScript. É aí onde podemos utilizar a **função de renderização**.
 
-Vamos mergulhar em um exemplo onda uma função `render()` seria prática. Digamos que queremos gerar um título ancorado:
+Vamos mergulhar em um exemplo onde uma função `render()` seria prática. Digamos que queremos gerar um título ancorados:
 
 ```html
 <h1>
   <a name="hello-world" href="#hello-world">
-    Hello world!
+    Olá mundo!
   </a>
 </h1>
 ```
 
-Títulos ancorados são usados frequentemente, nós poderíamos criar um componente:
+Títulos ancorados são usados frequentemente, deveríamos criar um componente:
 
 ```vue-html
-<anchored-heading :level="1">Hello world!</anchored-heading>
+<anchored-heading :level="1">Olá mundo!</anchored-heading>
 ```
 
-O componente deve gerar um título baseado na propriedade `level`, e, nós rapidamente chegaríamos aqui:
+O componente deve gerar um título baseado na propriedade `level`, e nós rapidamente chegaríamos nisso:
 
 ```js
 const app = Vue.createApp({})
@@ -53,9 +53,9 @@ app.component('anchored-heading', {
 })
 ```
 
-Este template não parece bom. Não apenas é verboso, como também estamos duplicando o `<slot></slot>` para cada nível de título. E quando adicionarmos o elemento de âncora, teríamos que duplicá-lo em cada ramo `v-if/v-else-if`.
+Este _template_ não parece bom. Não apenas é verboso, como também estamos duplicando o `<slot></slot>` para cada nível de título. E quando adicionarmos o elemento de âncora, teríamos que duplicá-lo em cada ramo `v-if/v-else-if`.
 
-Enquanto que templates funcionam muito bem para a maioria dos componentes, fica claro que este não é um deles. Então, vamos tentar reescreve-lo com uma função `render()`:
+Enquanto que _templates_ funcionam muito bem para a maioria dos componentes, fica claro que este não é um deles. Então, vamos tentar reescrevê-lo com uma função `render()`:
 
 ```js
 const app = Vue.createApp({})
@@ -65,9 +65,9 @@ app.component('anchored-heading', {
     const { h } = Vue
 
     return h(
-      'h' + this.level, // tag name
-      {}, // props/attributes
-      this.$slots.default() // array of children
+      'h' + this.level, // nome da tag
+      {}, // propriedades/atributos
+      this.$slots.default() // array de filhos
     )
   },
   props: {
@@ -79,29 +79,29 @@ app.component('anchored-heading', {
 })
 ```
 
-A implementação da função `render()` é muito mais simples, mas também requer mais familiaridade com as propriedades das instâncias de componentes. Nesse caso, você deve saber que quando você passar filhos sem uma diretiva `v-slot` para um componente, como o `Hello world!` dentro do `anchored-heading`, esses filhos serão armazenados na instância do componente em `$slots.default()`. Se você já não tiver feito ainda. **é recomendado ler a [API de propriedades de instância](../api/instance-properties.html) antes de mergulhar nas funções de renderização.**
+A implementação da função `render()` é muito mais simples, mas também requer mais familiaridade com as propriedades das instâncias dos componentes. Nesse caso, você deve saber que quando você passar filhos sem uma diretiva `v-slot` para um componente, como o `Olá mundo!` dentro do `anchored-heading`, esses filhos serão armazenados na instância do componente em `$slots.default()`. Se você já não tiver feito ainda, **é recomendado ler a [API de propriedades de instância](../api/instance-properties.html) antes de mergulhar nas funções de renderização.**
 
-## A árvore DOM
+## A Árvore DOM
 
-Antes de adentrarmos nas funções de renderização, é importante conhecer um pouco sobre como os navegadores funcionam. Veja esse exemplo de HTML:
+Antes de mergulharmos nas funções de renderização, é importante conhecer um pouco sobre como os navegadores funcionam. Veja esse HTML como exemplo:
 
 ```html
 <div>
-  <h1>My title</h1>
-  Some text content
-  <!-- TODO: Add tagline -->
+  <h1>Meu título</h1>
+  Algum conteúdo em texto
+  <!-- TODO: Adicionar slogan -->
 </div>
 ```
 
 Quando um navegador lê este código, ele compila uma [árvore de "nós DOM"](https://javascript.info/dom-nodes) para ajudá-lo a acompanhar tudo.
 
 A árvore de nós DOM para o HTML acima se parece com isso:
 
-![DOM Tree Visualization](/images/dom-tree.png)
+![Visualização da Árvore DOM](/images/dom-tree.png)
 
-Cada elemento é uma nó. Cada trecho de texto é um nó. Até mesmo comentários são nós! Cada nó pode possuír filhos (i.e. cada nó pode conter outros nós).
+Cada elemento é um nó. Cada trecho de texto é um nó. Até mesmo comentários são nós! Cada nó pode possuír filhos (i.e. cada nó pode conter outros nós).
 
-Atualizar todos esses nós eficientemente pode ser difícil, mas felizmente, nós nunca precisamos fazê-lo manualmente. Ao invés disso, nós dizemos ao Vue qual HTML nós queremos na página, em um template:
+Atualizar todos esses nós eficientemente pode ser difícil, mas felizmente, nós nunca precisamos fazê-lo manualmente. Ao invés disso, nós dizemos ao Vue qual HTML nós queremos na página, em um _template_:
 
 ```html
 <h1>{{ blogTitle }}</h1>
@@ -115,19 +115,19 @@ render() {
 }
 ```
 
-E em ambos os casos, o Vue automaticamente mantem a página atualizada, até mesmo quando o `blogTitle` muda.
+E em ambos os casos, o Vue automaticamente mantém a página atualizada, até mesmo quando o `blogTitle` muda.
 
-## A árvore Virtual DOM
+## A Árvore Virtual DOM
 
-Vue mantem a página atualizada compilando um **DOM virtual** para acompanhar as mudanças que necessita para fazer o DOM real. Olhando a seguinte linha mais de perto:
+Vue mantém a página atualizada compilando um **DOM virtual** para acompanhar as mudanças que necessita para fazer o DOM real. Olhando a seguinte linha mais de perto:
 
 ```js
 return Vue.h('h1', {}, this.blogTitle)
 ```
 
-O que função `h()` retorna? Não é _exatamente_ um elemento DOM real. Ela retorna um objeto que contém informações que descrevem para o Vue que tipo de nó deve ser renderizado na página, incluíndo descrições de qualquer nó filho. Chamamos essa descrição do nó de "nó virtual", geralmente abreviado para **_VNode_**. "Virtual DOM" é como chamamos toda a árvore de _VNodes_, constituída de uma árvore de componentes Vue.
+O que a função `h()` retorna? Não é _exatamente_ um elemento DOM real. Ela retorna um objeto que contém informações que descrevem para o Vue que tipo de nó deve ser renderizado na página, incluíndo descrições de qualquer nó filho. Chamamos essa descrição do nó de "nó virtual", geralmente abreviado para **_VNode_**. "Virtual DOM" é como chamamos toda a árvore de _VNodes_, constituída de uma árvore de componentes Vue.
 
-## Argumentos de `h()`
+## Argumentos do `h()`
 
 A função `h()`é um utilitário para criar _VNodes_. Poderia, talvez, ser nomeado com mais precisão como `createVNode()`, mas é chamada `h()` devido ao uso frequente e por brevidade. Ela aceita três argumentos:
 
@@ -150,7 +150,7 @@ h(
 
   // {String | Array | Object} children
   // VNodes filhos, construídos usando `h()`,
-  // ou usando strings to obter 'VNodes de texto' ou
+  // ou usando strings para obter 'VNodes de texto' ou
   // um objeto com slots.
   //
   // Opcional.
@@ -164,7 +164,7 @@ h(
 )
 ```
 
-## Exemplo completo
+## Exemplo Completo
 
 Com este conhecimento, podemos agora finalizar o componente que começamos:
 
@@ -214,15 +214,15 @@ app.component('anchored-heading', {
 
 ## Restrições
 
-### VNodes devem ser únicos
+### VNodes Devem Ser Únicos
 
 Todos os _VNodes_ na árvore de componentes devem ser únicos. Isso significa que a função de renderização a seguir é inválida:
 
 ```js
 render() {
   const myParagraphVNode = Vue.h('p', 'hi')
   return Vue.h('div', [
-    // Éca - VNodes duplicados!
+    // Eita - VNodes duplicados!
     myParagraphVNode, myParagraphVNode
   ])
 }
@@ -240,10 +240,11 @@ render() {
 }
 ```
 
-## Substituíndo Templates de recursos por JavaScript Simples
+## Substituíndo Recursos de _Templates_ com JavaScript Simples
+
 ### `v-if` e `v-for`
 
-Sempre que algo for facilmente realizado usando JavaScript simples, as funções de renderização do Vue não são uma alternativa apropriada. Por exemplo, em um template usando `v-if` e `v-for`:
+Sempre que algo for facilmente realizado usando JavaScript simples, as funções de renderização do Vue não são uma alternativa apropriada. Por exemplo, em um _template_ usando `v-if` e `v-for`:
 
 ```html
 <ul v-if="items.length">
@@ -252,7 +253,7 @@ Sempre que algo for facilmente realizado usando JavaScript simples, as funções
 <p v-else>Não foram encontrados itens.</p>
 ```
 
-Pode ser rescrito usando usando `if`/`else` e `map()` com JavaScript em uma função de renderização:
+Pode ser rescrito usando `if`/`else` e `map()` com JavaScript em uma função de renderização:
 
 ```js
 props: ['items'],
@@ -269,7 +270,7 @@ render() {
 
 ### `v-model`
 
-A diretiva `v-model` é expandida para as propriedades `modelValue`e `onUpdate:modelValue` durante a compilação do template - nós mesmos teremos que prover essas propriedades:
+A diretiva `v-model` é expandida para as propriedades `modelValue`e `onUpdate:modelValue` durante a compilação do _template_ - nós mesmos teremos que prover essas propriedades:
 
 ```js
 props: ['modelValue'],
@@ -283,7 +284,7 @@ render() {
 
 ### `v-on`
 
-Temos que prover o propriedade com nome apropriado para o manipulador do evento, e.g., para manipular um evento de `click`, o nome da propriedade deve ser `onClick`.
+Temos que prover um nome de propriedade adequado para o manipulador do evento, e.g., para manipular um evento de `click`, o nome da propriedade deve ser `onClick`.
 
 ```js
 render() {
@@ -295,7 +296,7 @@ render() {
 
 #### Modificadores de Eventos
 
-Os modificadores de evento `.passive`, `.capture` e `.once`, podem ser concatenados após o nome do evento usando grafia camelo (_camel case_).
+Os modificadores de evento `.passive`, `.capture` e `.once`, podem ser concatenados após o nome do evento usando _camel case_.
 
 Por exemplo:
 
@@ -316,7 +317,7 @@ Para todos os outros modificadores de evento, não é necessária nenhuma API es
 | `.stop`                                                        | `event.stopPropagation()`                                                                                                         |
 | `.prevent`                                                     | `event.preventDefault()`                                                                                                          |
 | `.self`                                                        | `if (event.target !== event.currentTarget) return`                                                                                |
-| Teclas:<br>`.enter`, `.13`                                     | `if (event.keyCode !== 13) return` (mude `13` para [outro código de tecla](http://keycode.info/) para outro modificador de tecla) |
+| Teclas:<br>`.enter`, `.13`                                     | `if (event.keyCode !== 13) return` (mude `13` para [outro código de tecla](http://keycode.info/) para outros modificadores de teclas) |
 | Modificadores de teclas:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return` (mude `ctrlKey` para `altKey`, `shiftKey`, ou `metaKey`, respectivamente)                            |
 
 Aqui temos um exemplo de todos esses modificadores sendo usados juntos:
@@ -326,7 +327,7 @@ render() {
   return Vue.h('input', {
     onKeyUp: event => {
       // Aborta se o elemento emitindo o evento não é
-      // o elemento em qual o evento é ligado
+      // o elemento em qual o evento está ligado
       if (event.target !== event.currentTarget) return
       // Aborta se a tecla que foi pressionada não é a tecla enter
       // (13) e a tecla shift não está sendo segurada
@@ -388,17 +389,17 @@ Vue.h(
   {
     level: 1
   },
-  [Vue.h('span', 'Hello'), ' world!']
+  [Vue.h('span', 'Olá'), ' mundo!']
 )
 ```
 
-Especialmente quando a versão usando template é mais concisa em comparação:
+Especialmente quando a versão usando _template_ é mais concisa em comparação:
 
 ```vue-html
-<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>
+<anchored-heading :level="1"> <span>Olá</span> mundo! </anchored-heading>
 ```
 
-É por isso que existe um [_plugin_ Babel](https://github.com/vuejs/jsx-next) para usar JSX com Vue, nos colocando em uma sintaxe que é mais próxima dos templates:
+É por isso que existe um [_plugin_ Babel](https://github.com/vuejs/jsx-next) para usar JSX com Vue, nos colocando em uma sintaxe que é mais próxima dos _templates_:
 
 ```jsx
 import AnchoredHeading from './AnchoredHeading.vue'
@@ -407,7 +408,7 @@ const app = createApp({
   render() {
     return (
       <AnchoredHeading level={1}>
-        <span>Hello</span> world!
+        <span>Olá</span> mundo!
       </AnchoredHeading>
     )
   }
@@ -418,8 +419,8 @@ app.mount('#demo')
 
 Para saber mais sobre como JSX mapeia para o JavaScript, veja a [documentação de uso](https://github.com/vuejs/jsx-next#installation).
 
-## Compilação de Template
+## Compilação de _Template_
 
-Pode ser que você esteja interessando em saber que o Vue, na verdade, compila os templates em funções de renderização. Isso é um detalhe de implementação que, geralmente, você não precisa saber, porém, se você quiser ver como especificamente templates são compilados, você pode achar interessante. Abaixo temos uma pequena demonstração de uso de `Vue.compile` para compilar em tempo real (_live-compile_) uma string de template:
+Pode ser que você esteja interessando em saber que o Vue, na verdade, compila os _templates_ em funções de renderização. Isso é um detalhe de implementação que, geralmente, você não precisa saber, porém, se você quiser ver como recursos específicos de _templates_ são compilados, você pode achar interessante. Abaixo temos uma pequena demonstração de uso de `Vue.compile` para compilar em tempo real uma string de _template_:
 
 <iframe src="https://vue-next-template-explorer.netlify.app/" width="100%" height="420"></iframe>
