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
-Performance gains from 2.x for functional components are now negligible in 3.x, so we recommend just using stateful components
13
-
-Functional components can only be created using a plain function that receives`props`and`context` (i.e., `slots`, `attrs`, `emit`)
14
-
-**BREAKING:**`functional`attribute on single-file component (SFC) `<template>` is removed
15
-
-**BREAKING:**`{ functional: true }`option in components created by functions is removed
12
+
-O ganho de performance com componentes funcionais na v2.x, se tornou insignificante na v3.x, então recomendamos o uso normal de componentes com estado
13
+
-Componentes Funcionais só podem ser criados com uma função simples que recebe`props`e`context` (i.e., `slots`, `attrs`, `emit`)
14
+
-**BREAKING:**O atributo `functional`na tag `<template>` em componentes single-file (SFC) foi removido
15
+
-**BREAKING:**A opção `{ functional: true }`em componentes criados por funções foi removida
16
16
17
-
For more information, read on!
17
+
Para mais informações, continue lendo!
18
18
19
-
## Introduction
19
+
## Introdução
20
20
21
-
In Vue 2, functional components had two primary use cases:
21
+
No Vue 2, componentes funcionais tinham dois casos de uso primários:
22
22
23
-
-as a performance optimization, because they initialized much faster than stateful components
24
-
-to return multiple root nodes
23
+
-Como otimização de performance, pois inicializavam muito mais rápido que componentes com estado
24
+
-Para retornar múltiplos nós raiz (root nodes)
25
25
26
-
However, in Vue 3, the performance of stateful components has improved to the point that the difference is negligible. In addition, stateful components now also include the ability to return multiple root nodes.
26
+
Porém, no Vue 3, a performance de componentes com estado melhorou, a ponto de a diferença ser insignificante. Além disso, componentes com estado agora também incluem a possibilidade de retornar multiplos nós raiz (root nodes).
27
27
28
-
As a result, the only remaining use case for functional components is simple components, such as a component to create a dynamic heading. Otherwise, it is recommended to use stateful components as you normally would.
28
+
Como resultado, o único caso de uso restante para componentes funcionais é um componente simples, como um componente para um cabeçalho dinâmico. Caso contrário, é recomendável usar componentes com estado, como você normalmente faria.
29
29
30
-
## 2.x Syntax
30
+
## Sintaxe v2.x
31
31
32
-
Using the `<dynamic-heading>` component, which is responsible for rendering out the appropriate heading (i.e., `h1`, `h2`, `h3`, etc.), this could have been written as a single-file component in 2.x as:
32
+
Considerando o componente `<dynamic-heading>`, que é responsável por renderizar o cabeçalho apropriado (i.e., `h1`, `h2`, `h3`, etc.), poderia ser escrito como um componente single-file na v2.x da seguinte forma:
33
33
34
34
```js
35
-
//Vue 2 Functional Component Example
35
+
//Exemplo de Componente Funcional no Vue 2
36
36
exportdefault {
37
37
functional:true,
38
38
props: ['level'],
@@ -42,10 +42,10 @@ export default {
42
42
}
43
43
```
44
44
45
-
Or, for those who preferred the `<template>`in a single-file component:
45
+
Ou, para aqueles que preferem a tag `<template>`em um componente single-file:
46
46
47
47
```js
48
-
//Vue 2 Functional Component Example with <template>
48
+
//Exemplo de Componente Funcional com tag <template> no Vue 2
49
49
<template functional>
50
50
<component
51
51
:is="`h${props.level}`"
@@ -61,17 +61,17 @@ export default {
61
61
</script>
62
62
```
63
63
64
-
## 3.x Syntax
64
+
## Sintaxe v3.x
65
65
66
-
### Components Created by Functions
66
+
### Componentes Criados por Funções
67
67
68
-
Now in Vue 3, all functional components are created with a plain function. In other words, there is no need to define the `{ functional: true }`component option.
68
+
Agora no Vue 3, todos os componentes funcionais são criados com uma função simples. Em outras palavras, não há mais a necessidade de definir a opção `{ functional: true }`no componente.
69
69
70
-
They will receive two arguments: `props`and`context`. The `context`argument is an object that contains a component's `attrs`, `slots`, and`emit`properties.
70
+
As funções receberão dois argumentos: `props`e`context`. O argumento `context`é um objeto que contém as propriedados `attrs`, `slots`, e`emit`de um componente.
71
71
72
-
In addition, rather than implicitly provide `h`in a `render` function, `h`is now imported globally.
72
+
Além disso, ao invés de fornecer implicitamente o argumento `h`em uma função `render`, `h`agora é importado globalmente.
73
73
74
-
Using the previously mentioned example of a `<dynamic-heading>` component, here is how it looks now.
74
+
Usando o exemplo mencionado anteriormente de um componente `<dynamic-heading>`, aqui está como ficou agora:
In 3.x, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional`on SFCs is to remove the attribute and rename all references of`props`to`$props`and`attrs`to`$attrs`.
90
+
Na v3.x, a diferença de performance entre componentes funcionais e de estado foi reduzida drasticamente, e será insignificante na maioria dos casos. Como resultado, o caminho de migração para desenvolvedores usando o atributo `functional`em componentes single-page é remover o atributo e renomear as referências de`props`para`$props`e`attrs`para`$attrs`.
91
91
92
-
Using our `<dynamic-heading>`example from before, here is how it would look now.
92
+
Usando o exemplo `<dynamic-heading>`de antes, aqui está como ficaria agora:
93
93
94
94
```js{1}
95
95
<template>
@@ -106,14 +106,14 @@ export default {
106
106
</script>
107
107
```
108
108
109
-
The main differences are that:
109
+
As principais diferenças são:
110
110
111
-
1.`functional`attribute removed on`<template>`
112
-
1.`listeners`are now passed as part of`$attrs`and can be removed
111
+
1.Atributo `functional`removido da tag`<template>`
112
+
1.`listeners`agora são passados como parte de`$attrs`e pode ser removido
113
113
114
-
## Next Steps
114
+
## Próximos Passos
115
115
116
-
For more information on the usage of the new functional components and the changes to render functions in general, see:
116
+
Para mais informação sobre o uso dos novos componentes funcionais e as mudanças nas funções de renderização em geral, acesse:
0 commit comments