Skip to content

Commit 9143ae6

Browse files
committed
Review on guide/data-methods
1 parent 42029a5 commit 9143ae6

File tree

1 file changed

+18
-21
lines changed

1 file changed

+18
-21
lines changed

src/guide/data-methods.md

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Propriedades de dados e Métodos
1+
# Propriedades de Dados e Métodos
22

33
<VideoLesson href="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>
44

5-
## Propriedades de dados
5+
## Propriedades de Dados
66

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:
88

99
```js
1010
const app = Vue.createApp({
@@ -27,13 +27,12 @@ vm.$data.count = 6
2727
console.log(vm.count) // => 6
2828
```
2929

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.
3131

3232
É 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).
3333

3434
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.
3535

36-
3736
## Métodos
3837

3938
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()
6059
console.log(vm.count) // => 5
6160
```
6261

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.
6463

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:
6665

6766
```html
68-
<button @click="increment">Up vote</button>
67+
<button @click="increment">Voto positivo</button>
6968
```
7069

7170
No exemplo acima, o método `increment` será chamado quando o `<button>` for clicado.
7271

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:
7473

7574
```html
7675
<span :title="toTitleDate(date)">
7776
{{ formatDate(date) }}
7877
</span>
7978
```
8079

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.
8481

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).
8583

86-
### Debouncing and Throttling
84+
### _Debouncing_ e _Throttling_
8785

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/).
8987

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`:
9189

9290
```html
9391
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
9492
<script>
9593
Vue.createApp({
9694
methods: {
97-
// Debouncing with Lodash
95+
// Debouncing com Lodash
9896
click: _.debounce(function() {
99-
// ... respond to click ...
97+
// ... responder ao clique ...
10098
}, 500)
10199
}
102100
}).mount('#app')
103101
</script>
104102
```
105103

106-
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`:
108105

109106
```js
110107
app.component('save-button', {
111108
created() {
112-
// Debouncing with Lodash
109+
// Debouncing com Lodash
113110
this.debouncedClick = _.debounce(this.click, 500)
114111
},
115112
unmounted() {
@@ -118,7 +115,7 @@ app.component('save-button', {
118115
},
119116
methods: {
120117
click() {
121-
// ... respond to click ...
118+
// ... responder ao clique ...
122119
}
123120
},
124121
template: `

0 commit comments

Comments
 (0)