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
> This section uses [single-file component](single-file-component.html)syntax for code examples
3
+
> Esta seção usa a sintaxe de [componente single file](single-file-component.html)para exemplos de código.
4
4
5
-
> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html)and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API.
5
+
> Este guia assume que você já leu a [Introdução à API de Composição](composition-api-introduction.html)e [Fundamentos da Reatividade](reactivity-fundamentals.html). Leia-os primeiro se você é novo em API de composição (Composition API).
6
6
7
-
## Arguments
7
+
## Argumentos
8
8
9
-
When using the `setup` function, it will take two arguments:
9
+
Ao usar a função `setup`, ela receberá dois argumentos:
10
10
11
11
1.`props`
12
12
2.`context`
13
13
14
-
Let's dive deeper into how each argument can be used.
14
+
Vamos nos aprofundar em como cada argumento pode ser usado.
15
15
16
-
### Props
16
+
### `props`
17
17
18
-
The first argument in the`setup`function is the`props` argument. Just as you would expect in a standard component, `props`inside of a `setup`function are reactive and will be updated when new props are passed in.
18
+
O primeiro argumento da função`setup`é o argumento`props`. Assim como é de se esperar em um componente padrão, `props`dentro de uma função `setup`são reativos e serão atualizados quando novos props são passados.
19
19
20
20
```js
21
21
// MyBook.vue
@@ -29,12 +29,11 @@ export default {
29
29
}
30
30
}
31
31
```
32
-
33
-
:::warning
34
-
However, because `props` are reactive, you **cannot use ES6 destructuring** because it will remove props reactivity.
32
+
:::warning Atenção
33
+
No entanto, porque os `props` são reativos, você **não pode usar a desestruturação de objetos do ES6** porque isso vai remover sua reatividade.
35
34
:::
36
35
37
-
If you need to destructure your props, you can do this safely by utilizing the [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) inside of the`setup` function.
36
+
Se você precisa desestruturar seus props, você o pode fazer seguramente usando o [toRefs](reactivity-fundamentals.html#desestruturar-estado-reativo) dentro da função`setup`.
38
37
39
38
```js
40
39
// MyBook.vue
@@ -48,28 +47,28 @@ setup(props) {
48
47
}
49
48
```
50
49
51
-
### Context
50
+
### `context`
52
51
53
-
The second argument passed to the `setup`function is the `context`. The`context`is a normal JavaScript object that exposes three component properties:
52
+
O segundo argumento passado para a função `setup`é o `context`. O`context`é um objeto Javascript normal que expõe três propriedades do componente:
54
53
55
54
```js
56
55
// MyBook.vue
57
56
58
57
exportdefault {
59
58
setup(props, context) {
60
-
//Attributes (Non-reactive object)
59
+
//Atributos (objeto não reativo)
61
60
console.log(context.attrs)
62
61
63
-
// Slots (Non-reactive object)
62
+
// Slots (objeto não reativo)
64
63
console.log(context.slots)
65
64
66
-
//Emit Events (Method)
65
+
//Emissão de Eventos (método)
67
66
console.log(context.emit)
68
67
}
69
68
}
70
69
```
71
70
72
-
The `context`object is a normal JavaScript object, i.e., it is not reactive, this means you can safely use ES6 destructuring on `context`.
71
+
O objeto `context`é um objeto normal Javascript, ou seja, não é reativo, o que significa que você pode seguramente utilizar a desestruturação ES6 nele.
73
72
74
73
```js
75
74
// MyBook.vue
@@ -80,26 +79,26 @@ export default {
80
79
}
81
80
```
82
81
83
-
`attrs`and`slots`are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as `attrs.x`or`slots.x`. Also note that unlike `props`, `attrs`and`slots`are **not**reactive. If you intend to apply side effects based on`attrs`or`slots` changes, you should do so inside an `onUpdated` lifecycle hook.
82
+
`attrs`e`slots`são objetos com estados que sempre são atualizados quando o componente é atualizado. Isso significa que você deve evitar desestruturá-los e sempre referenciar suas propriedades por meio de `attrs.x`ou`slots.x`. Note também que, diferente de `props`, `attrs`e`slots`**não**são reativos. Se você busca aplicar efeitos baseados em mudanças nos`attrs`ou`slots`, você deveria fazê-lo dentro do hook de ciclo de vida `onUpdate`.
84
83
85
-
## Accessing Component Properties
84
+
## Acessando Propriedades de Componentes
86
85
87
-
When `setup`is executed, the component instance has not been created yet. As a result, you will only be able to access the following properties:
86
+
Quando o `setup`é executado, a instância do componente ainda não foi criada. Como resultado, você somente poderá acessar as seguintes propriedades:
88
87
89
88
-`props`
90
89
-`attrs`
91
90
-`slots`
92
91
-`emit`
93
92
94
-
In other words, you**will not have access**to the following component options:
93
+
Em outras palavras, você**não terá acesso**às seguintes opções de componentes:
95
94
96
95
-`data`
97
96
-`computed`
98
97
-`methods`
99
98
100
-
## Usage with Templates
99
+
## Uso com _Templates_
101
100
102
-
If`setup`returns an object, the properties on the object can be accessed in the component's template, as well as the properties of the `props`passed into`setup`:
101
+
Se`setup`retorna um objeto, as propriedades no objeto podem ser acessadas no _template_ do componente, assim como as propriedades do `props`passadas para o`setup`:
103
102
104
103
```vue-html
105
104
<!-- MyBook.vue -->
@@ -116,9 +115,9 @@ If `setup` returns an object, the properties on the object can be accessed in th
116
115
},
117
116
setup(props) {
118
117
const readersNumber = ref(0)
119
-
const book = reactive({ title: 'Vue 3 Guide' })
118
+
const book = reactive({ title: 'Guia do Vue 3' })
120
119
121
-
// expose to template
120
+
// expor ao template
122
121
return {
123
122
readersNumber,
124
123
book
@@ -128,11 +127,11 @@ If `setup` returns an object, the properties on the object can be accessed in th
128
127
</script>
129
128
```
130
129
131
-
Note that [refs](../api/refs-api.html#ref)returned from `setup`are [automatically unwrapped](/guide/reactivity-fundamentals.html#ref-unwrapping) when accessed in the template so you shouldn't use`.value`in templates.
130
+
Note que o [refs](../api/refs-api.html#ref)que é retornado do `setup`é [automaticamente desempacotado](/guide/reactivity-fundamentals.html#ref-desempacotada) quando acessado no _template_, portanto você não deveria usar`.value`nos _templates_.
132
131
133
-
## Usage with Render Functions
132
+
## Uso com Funções de Renderização
134
133
135
-
`setup`can also return a render function which can directly make use of the reactive state declared in the same scope:
134
+
`setup`pode, inclusive, retornar uma função de renderização que pode diretamente fazer uso do estado reativo declarado no mesmo escopo:
**Inside `setup()`, `this`won't be a reference to the current active instance** Since `setup()`is called before other component options are resolved, `this`inside `setup()`will behave quite differently from`this`in other options. This might cause confusions when using `setup()`along other Options API.
153
+
**Dentro de `setup()`, `this`não será uma referência à instância atualmente ativa**. Já que `setup()`é chamado antes que as outras opções do componente sejam resolvidas, `this`dentro de `setup()`vai se comportar diferentemente do`this`de outras opções. Isso pode causar confusões ao se usar o `setup()`com outras API de Opções.
0 commit comments