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/data-methods.md
+18-21Lines changed: 18 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
-
# Propriedades de dados e Métodos
1
+
# Propriedades de Dados e Métodos
2
2
3
3
<VideoLessonhref="https://vueschool.io/lessons/methods-in-vue-3?friend=vuejs"title="Aprenda a usar métodos na Vue School">Aprenda a trabalhar com dados e métodos com uma aula gratuita da Vue School</VideoLesson>
4
4
5
-
## Propriedades de dados
5
+
## Propriedades de Dados
6
6
7
-
A opção `data` para um componente é uma função. Vue chama essa função como parte da criação de uma nova instância de componente. Ele deve retornar um objeto, que o Vue irá envolver em seu sistema de reatividade e armazenar na instância do componente como `$data`. Por conveniência, quaisquer propriedades de nível superior desse objeto também são expostos diretamente por meio da instância do componente:
7
+
A opção `data` para um componente é uma função. Vue chama essa função como parte da criação de uma nova instância de componente. Ela deve retornar um objeto, que o Vue irá envolver em seu sistema de reatividade e armazenar na instância do componente como `$data`. Por conveniência, quaisquer propriedades de nível superior desse objeto também são expostas diretamente por meio da instância do componente:
8
8
9
9
```js
10
10
constapp=Vue.createApp({
@@ -27,13 +27,12 @@ vm.$data.count = 6
27
27
console.log(vm.count) // => 6
28
28
```
29
29
30
-
Essas propriedades de instância são adicionadas apenas quando a instância é criada pela primeira vez, então você precisa garantir que todas estejam presentes no objeto retornado pela função `data`. Onde necessário, use `null`,`undefined` ou algum outro valor de espaço reservado para propriedades onde o valor desejado ainda não está disponível.
30
+
Essas propriedades de instância são adicionadas apenas quando a instância é criada pela primeira vez, então você precisa garantir que todas estejam presentes no objeto retornado pela função `data`. Onde necessário, use `null`,`undefined` ou algum outro valor que reserve o lugar para propriedades onde o valor desejado ainda não está disponível.
31
31
32
32
É possível adicionar uma nova propriedade diretamente à instância do componente sem incluí-la em `data`. No entanto, como essa propriedade não é suportada pelo objeto reativo `$data`, ela não será rastreada automaticamente pelo [sistema de reatividade do Vue](reactivity.html).
33
33
34
34
O Vue usa o prefixo `$` ao expor suas próprias APIs integradas por meio da instância do componente. Ele também reserva o prefixo `_` para propriedades internas. Você deve evitar usar nomes para propriedades `data` de nível superior que começam com qualquer um desses caracteres.
35
35
36
-
37
36
## Métodos
38
37
39
38
Para adicionar métodos a uma instância do componente, usamos a opção `methods`. Isto deve ser um objeto contendo os métodos desejados:
@@ -60,56 +59,54 @@ vm.increment()
60
59
console.log(vm.count) // => 5
61
60
```
62
61
63
-
O Vue vincula automaticamente o valor `this`para`methods` para que sempre se refira à instância do componente. Isso garante que um método retenha o valor `this` correto se for usado como um ouvinte de evento ou retorno de chamada. Você deve evitar o uso de funções de seta ao definir `methods`, pois isso impede que o Vue vincule o valor `this` apropriado.
62
+
O Vue vincula automaticamente o valor de `this`nos`methods` para que sempre se refira à instância do componente. Isso garante que um método retenha o valor de `this` correto se for usado como um escutador de evento ou _callback_. Você deve evitar o uso de _arrow functions_ao definir `methods`, pois isso impede que o Vue vincule o valor de`this` apropriado.
64
63
65
-
Assim como todas as outras propriedades da instância do componente, os métodos em `methods` são acessíveis a partir do template do componente. Dentro de um modelo, eles são mais comumente usados como ouvintes de eventos:
64
+
Assim como todas as outras propriedades da instância do componente, os métodos em `methods` são acessíveis a partir do _template_ do componente. Dentro de um _template_, eles são mais comumente usados como escutadores de eventos:
66
65
67
66
```html
68
-
<button@click="increment">Up vote</button>
67
+
<button@click="increment">Voto positivo</button>
69
68
```
70
69
71
70
No exemplo acima, o método `increment` será chamado quando o `<button>` for clicado.
72
71
73
-
Também é possível chamar um método diretamente de um modelo. Como veremos em breve, geralmente é melhor usar uma [propriedade computada](computed.html) em vez disso. No entanto, usar um método pode ser útil em cenários onde as propriedades computadas não são uma opção viável. Você pode chamar um método em qualquer lugar em que um modelo suporte expressões JavaScript:
72
+
Também é possível chamar um método diretamente de um _template_. Como veremos em breve, geralmente é melhor usar um [dado computado](computed.html) em vez disso. No entanto, usar um método pode ser útil em cenários onde os dados computados não são uma opção viável. Você pode chamar um método em qualquer lugar em que um _template_ suporte expressões JavaScript:
74
73
75
74
```html
76
75
<span:title="toTitleDate(date)">
77
76
{{ formatDate(date) }}
78
77
</span>
79
78
```
80
79
81
-
Se os métodos `toTitleDate` ou `formatDate` acessam qualquer dado reativo, ele será rastreado como uma dependência de renderização, como se tivesse sido usado diretamente no template.
82
-
83
-
Os métodos chamados a partir de um modelo não devem ter efeitos colaterais, como alteração de dados ou acionamento de processos assíncronos. Se você se sentir tentado a fazer isso, provavelmente deve usar um [lifecycle hook](instance.html#lifecycle-hooks).
80
+
Se os métodos `toTitleDate` ou `formatDate` acessarem qualquer dado reativo, ele será rastreado como uma dependência de renderização, como se tivesse sido usado diretamente no template.
84
81
82
+
Os métodos chamados a partir de um _template_ não devem ter efeitos colaterais, como alteração de dados ou acionamento de processos assíncronos. Se você se sentir tentado a fazer isso, provavelmente deve usar um [gatilho de ciclo de vida](instance.html#gatilhos-de-ciclo-de-vida).
85
83
86
-
### Debouncing and Throttling
84
+
### _Debouncing_ e _Throttling_
87
85
88
-
O Vue não inclui suporte integrado para depuração ou limitação, mas pode ser implementado usando bibliotecas como [Lodash](https://lodash.com/).
86
+
O Vue não inclui suporte integrado para _debouncing_ ou _throttling_, mas pode ser implementado usando bibliotecas como [Lodash](https://lodash.com/).
89
87
90
-
Nos casos em que um componente é usado apenas uma vez, o debouncing pode ser aplicado diretamente em `methods`:
88
+
Nos casos em que um componente é usado apenas uma vez, o _debouncing_ pode ser aplicado diretamente em `methods`:
No entanto, essa abordagem é potencialmente problemática para componentes que são reutilizados, porque todos eles compartilharão a mesma função depurada. Para manter as instâncias do componente independentes umas das outras, podemos adicionar a função depurada no gancho do ciclo de vida `created`:
107
-
104
+
No entanto, essa abordagem é potencialmente problemática para componentes que são reutilizados, porque todos eles compartilharão a mesma função _debounced_. Para manter as instâncias do componente independentes umas das outras, podemos adicionar a função _debounced_ no gatilho do ciclo de vida `created`:
0 commit comments