You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/migration/render-function-api.md
+38-37Lines changed: 38 additions & 37 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,34 +12,32 @@ Esta mudança não vai afetar usuários de `<template>`.
12
12
Aqui está um rápido resumo do que mudou:
13
13
14
14
-`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
16
16
- VNodes agora têm uma estrutura plana de props
17
17
18
-
19
18
Para mais informações, continue lendo!
20
19
21
-
## Argumento da Função Render
20
+
## Argumento da Função de Renderização
22
21
23
-
### Sintaxe 2.x
22
+
### Sintaxe v2.x
24
23
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:
26
25
27
26
```js
28
-
// Exemplo da Função Render no Vue 2
27
+
// Exemplo da Função de Renderização no Vue 2
29
28
exportdefault {
30
29
render(h) {
31
30
returnh('div')
32
31
}
33
32
}
34
33
```
35
34
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
39
36
37
+
Na v3.x, o `h` agora é importado globalmente em vez de automaticamente passado como um argumento.
40
38
41
39
```js
42
-
// Exemplo da Função Render no Vue 3
40
+
// Exemplo da Função de Renderização no Vue 3
43
41
import { h } from'vue'
44
42
45
43
exportdefault {
@@ -48,11 +46,12 @@ export default {
48
46
}
49
47
}
50
48
```
51
-
## Mudança da assinatura da função Render
52
49
53
-
### Sintaxe 2.x
50
+
## Mudança da Assinatura da Função de Renderização
51
+
52
+
### Sintaxe v2.x
54
53
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`.
56
55
57
56
```js
58
57
// Exemplo da Função Render no Vue 2
@@ -62,10 +61,10 @@ export default {
62
61
}
63
62
}
64
63
```
65
-
### Sintaxe 3.x
66
64
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
68
66
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()`.
69
68
70
69
```js
71
70
import { h, reactive } from'vue'
@@ -80,7 +79,7 @@ export default {
80
79
state.count++
81
80
}
82
81
83
-
// retorna a função render
82
+
// retorna a função de renderização
84
83
return () =>
85
84
h(
86
85
'div',
@@ -92,16 +91,17 @@ export default {
92
91
}
93
92
}
94
93
```
94
+
95
95
Para mais informações em como o `setup()` funciona, veja nosso [Guia da API de Composição](/guide/composition-api-introduction.html).
96
96
97
97
## Formato de Props VNode
98
98
99
-
### Sintaxe 2.x
99
+
### Sintaxe v2.x
100
100
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:
102
102
103
103
```js
104
-
//2.x
104
+
//v2.x
105
105
{
106
106
staticClass:'button',
107
107
class: {'is-outlined': isOutlined },
@@ -114,12 +114,12 @@ Na versão 2.x, o `domProps` continha uma lista aninhada dentro dos props VNode:
114
114
}
115
115
```
116
116
117
-
### Sintaxe 3.x
117
+
### Sintaxe v3.x
118
118
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.
@@ -130,11 +130,11 @@ Em 3.x, toda a estrutura de props do VNode é achatada. Usando o exemplo acima,
130
130
}
131
131
```
132
132
133
-
## Componente registrado
133
+
## Componente Registrado
134
134
135
-
### Sintaxe 2.x
135
+
### Sintaxe v2.x
136
136
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:
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`:
164
164
165
165
```js
166
-
//3.x
166
+
//v3.x
167
167
import { h, resolveComponent } from'vue'
168
168
169
169
exportdefault {
@@ -173,20 +173,21 @@ export default {
173
173
}
174
174
}
175
175
```
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).
177
176
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.
179
180
180
181
## Estratégia de Migração
181
182
182
-
### Autores da biblioteca
183
+
### Autores de Biblioteca
183
184
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:
185
186
186
-
- o Vue não deve estar no bundle da biblioteca
187
+
- o Vue não deve estar empacotado na biblioteca
187
188
- 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
189
190
190
-
## Próximos passos
191
+
## Próximos Passos
191
192
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