Skip to content

Commit 095480b

Browse files
committed
Review in guide/migration/render-function-api
1 parent a4ef58a commit 095480b

File tree

1 file changed

+38
-37
lines changed

1 file changed

+38
-37
lines changed

src/guide/migration/render-function-api.md

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,34 +12,32 @@ Esta mudança não vai afetar usuários de `<template>`.
1212
Aqui está um rápido resumo do que mudou:
1313

1414
- `h` agora é globalmente importado em vez de passado como argumento para funções de renderização
15-
- Argumentos da função render mudaram para ser mais consistentes entre componentes funcionais e com estado
15+
- Argumentos da função de renderização mudaram para serem mais consistentes entre componentes funcionais e com estado
1616
- VNodes agora têm uma estrutura plana de props
1717

18-
1918
Para mais informações, continue lendo!
2019

21-
## Argumento da Função Render
20+
## Argumento da Função de Renderização
2221

23-
### Sintaxe 2.x
22+
### Sintaxe v2.x
2423

25-
Na versão 2.x, a função `render` receberia automaticamente a função `h` (que é um _alias_ para `createElement`) como argumento:
24+
Na v2.x, a função `render` receberia automaticamente a função `h` (que é um _alias_ para `createElement`) como argumento:
2625

2726
```js
28-
// Exemplo da Função Render no Vue 2
27+
// Exemplo da Função de Renderização no Vue 2
2928
export default {
3029
render(h) {
3130
return h('div')
3231
}
3332
}
3433
```
3534

36-
### Sintaxe 3.x
37-
38-
Na versão 3.x, o `h` agora é importado globalmente em vez de automaticamente passado como um argumento.
35+
### Sintaxe v3.x
3936

37+
Na v3.x, o `h` agora é importado globalmente em vez de automaticamente passado como um argumento.
4038

4139
```js
42-
// Exemplo da Função Render no Vue 3
40+
// Exemplo da Função de Renderização no Vue 3
4341
import { h } from 'vue'
4442

4543
export default {
@@ -48,11 +46,12 @@ export default {
4846
}
4947
}
5048
```
51-
## Mudança da assinatura da função Render
5249

53-
### Sintaxe 2.x
50+
## Mudança da Assinatura da Função de Renderização
51+
52+
### Sintaxe v2.x
5453

55-
Na versão 2.x, a função `render` recebeu automaticamente argumentos como o `h`.
54+
Na v2.x, a função `render` recebeu automaticamente argumentos como o `h`.
5655

5756
```js
5857
// Exemplo da Função Render no Vue 2
@@ -62,10 +61,10 @@ export default {
6261
}
6362
}
6463
```
65-
### Sintaxe 3.x
6664

67-
Na versão 3.x, desde que a função `render` já não recebe argumentos, ela será primeiramente usada dentro da função `setup()`. Isso traz o benefício adicional em ganhar acesso para o estado reativo e às funções declaradas no escopo, assim como argumentos passados para o `setup()`.
65+
### Sintaxe v3.x
6866

67+
Na v3.x, desde que a função `render` já não recebe argumentos, ela será primeiramente usada dentro da função `setup()`. Isso traz o benefício adicional em ganhar acesso ao estado reativo e às funções declaradas no escopo, assim como argumentos passados para o `setup()`.
6968

7069
```js
7170
import { h, reactive } from 'vue'
@@ -80,7 +79,7 @@ export default {
8079
state.count++
8180
}
8281

83-
// retorna a função render
82+
// retorna a função de renderização
8483
return () =>
8584
h(
8685
'div',
@@ -92,16 +91,17 @@ export default {
9291
}
9392
}
9493
```
94+
9595
Para mais informações em como o `setup()` funciona, veja nosso [Guia da API de Composição](/guide/composition-api-introduction.html).
9696

9797
## Formato de Props VNode
9898

99-
### Sintaxe 2.x
99+
### Sintaxe v2.x
100100

101-
Na versão 2.x, o `domProps` continha uma lista aninhada dentro dos props VNode:
101+
Na v2.x, o `domProps` continha uma lista aninhada dentro dos props VNode:
102102

103103
```js
104-
// 2.x
104+
// v2.x
105105
{
106106
staticClass: 'button',
107107
class: {'is-outlined': isOutlined },
@@ -114,12 +114,12 @@ Na versão 2.x, o `domProps` continha uma lista aninhada dentro dos props VNode:
114114
}
115115
```
116116

117-
### Sintaxe 3.x
117+
### Sintaxe v3.x
118118

119-
Em 3.x, toda a estrutura de props do VNode é achatada. Usando o exemplo acima, ele ficaria algo assim agora.
119+
Na v3.x, toda a estrutura de props do VNode é achatada. Usando o exemplo acima, agora ele ficaria algo assim.
120120

121121
```js
122-
// Sintaxe 3.x
122+
// Sintaxe v3.x
123123
{
124124
class: ['button', { 'is-outlined': isOutlined }],
125125
style: [{ color: '#34495E' }, { backgroundColor: buttonColor }],
@@ -130,11 +130,11 @@ Em 3.x, toda a estrutura de props do VNode é achatada. Usando o exemplo acima,
130130
}
131131
```
132132

133-
## Componente registrado
133+
## Componente Registrado
134134

135-
### Sintaxe 2.x
135+
### Sintaxe v2.x
136136

137-
Em 2.x, quando um componente foi registrado, a função render funcionaria bem quando passasse o nome do componente como uma string para o primeiro argumento:
137+
Na v2.x, quando um componente é registrado, a função de renderização funcionaria bem quando passado o nome do componente como uma string para o primeiro argumento:
138138

139139
```js
140140
// 2.x
@@ -146,7 +146,7 @@ Vue.component('button-counter', {
146146
}
147147
template: `
148148
<button @click="count++">
149-
Clicked {{ count }} times.
149+
Clicado {{ count }} vezes.
150150
</button>
151151
`
152152
})
@@ -158,12 +158,12 @@ export default {
158158
}
159159
```
160160

161-
### Sintaxe 3.x
161+
### Sintaxe v3.x
162162

163-
Em 3.x, com os VNodes sendo livres de contexto, não podemos usar um ID como string para implicitamente buscar por componentes registrado. Em vez disos, precisamos usar o método importado `resolveComponent`:
163+
Na v3.x, com os VNodes sendo livres de contexto, não podemos usar um ID como string para implicitamente buscar por componentes registrados. Em vez disso, precisamos usar o método importado `resolveComponent`:
164164

165165
```js
166-
// 3.x
166+
// v3.x
167167
import { h, resolveComponent } from 'vue'
168168

169169
export default {
@@ -173,20 +173,21 @@ export default {
173173
}
174174
}
175175
```
176-
Para mais informações, veja [O RFC* das mudanças da API da Função Render](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes).
177176

178-
* **Nota da tradução**: RFC significa Request For Comments, e é um processo que visa prover um caminho consistente e controlado para as novas funcionalidades de um framework.
177+
Para mais informações, veja [O RFC* das mudanças da API da Função de Renderização](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes).
178+
179+
* **Nota da tradução**: RFC significa _Request For Comments_ (Solicitação de Comentários), e é um processo que visa prover um caminho consistente e controlado para as novas funcionalidades de um framework.
179180

180181
## Estratégia de Migração
181182

182-
### Autores da biblioteca
183+
### Autores de Biblioteca
183184

184-
A Importação global do `h` significa que qualquer biblioteca que contenha componentes Vue vão incluir `import { h } from 'vue'` em algum lugar. Como resultado, isso cria um pouco de sobrecarga, pois requer que os autores da biblioteca configurem corretamente a externalização do Vue em suas configurações de compilação:
185+
A importação global do `h` significa que qualquer biblioteca que contenha componentes Vue vão incluir `import { h } from 'vue'` em algum lugar. Como resultado, isso cria um pouco de sobrecarga, pois requer que os autores de biblioteca configurem corretamente a externalização do Vue em suas configurações de compilação:
185186

186-
- o Vue não deve estar no bundle da biblioteca
187+
- o Vue não deve estar empacotado na biblioteca
187188
- Para construções de módulo, a importação deve ser deixada sozinha e tratada pelo empacotador do usuário final
188-
- Para UMD / compilações de navegador, deve-se tentar o Vue.h global primeiro e alternar para exigir chamadas
189+
- Para UMD / compilações de navegador, deve-se tentar o Vue.h global primeiro e alternar para exigir chamadas se necessário
189190

190-
## Próximos passos
191+
## Próximos Passos
191192

192-
Veja [O Guia da Função Render](/guide/render-function) para documentação mais detalhada!
193+
Veja [O Guia da Função de Renderização](/guide/render-function) para documentação mais detalhada!

0 commit comments

Comments
 (0)