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
In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example, if we have an object with a nested array:
5
+
> Originalmente, Propriedades Computadas _(Computed Properties)_. Entretanto, a adaptação "Dados Computados" foi eleita devido suas utilizações em _templates_ serem efetivamente similares às utilizações de `data`.
6
+
7
+
Expressões dentro de _templates_ são muito convenientes, mas são destinadas à realização de operações simples. Adicionar muita lógica em seus _templates_ podem torná-los abarrotados de código e dificultar a manutenção. Vamos tomar como exemplo o seguinte objeto, com um vetor _(array)_ incluso:
6
8
7
9
```js
8
10
Vue.createApp({
@@ -11,34 +13,34 @@ Vue.createApp({
11
13
author: {
12
14
name:'John Doe',
13
15
books: [
14
-
'Vue 2 - Advanced Guide',
15
-
'Vue 3 - Basic Guide',
16
-
'Vue 4 - The Mystery'
16
+
'Vue 2 - Guia Avançado ',
17
+
'Vue 3 - Guia Básico',
18
+
'Vue 4 - O Mistério'
17
19
]
18
20
}
19
21
}
20
22
}
21
23
})
22
24
```
23
25
24
-
And we want to display different messages depending on if `author`already has some books or not
26
+
Desejamos mostrar diferentes mensagens, ao verificarmos se `author`possuir livros _(books)_ ou não:
At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it performs a calculation depending on `author.books`. The problem is made worse when you want to include this calculation in your template more than once.
35
+
Deste modo, o _template_ já não é mais simples e declarativo. Você sempre terá que observar este pedaço de código por um momento para, então, entender que ele realiza um cálculo baseando-se na quantidade de itens disponíveis em `author.books`. O problema se agravará ainda mais se você desejar incluir mais de uma vez este mesmo cálculo no seu _template_.
34
36
35
-
That's why for complex logic that includes reactive data, you should use a **computed property**.
37
+
É por razões como estas — para lógicas complexas que dependem de dados reativos — que você deve utilizar **dados computados**_(computed properties)_.
36
38
37
-
### Basic Example
39
+
### Exemplo Básico
38
40
39
41
```html
40
42
<divid="computed-basics">
41
-
<p>Has published books:</p>
43
+
<p>Possui livros publicados:</p>
42
44
<span>{{ publishedBooksMessage }}</span>
43
45
</div>
44
46
```
@@ -50,58 +52,58 @@ Vue.createApp({
50
52
author: {
51
53
name:'John Doe',
52
54
books: [
53
-
'Vue 2 - Advanced Guide',
54
-
'Vue 3 - Basic Guide',
55
-
'Vue 4 - The Mystery'
55
+
'Vue 2 - Guia Avançado',
56
+
'Vue 3 - Guia Básico',
57
+
'Vue 4 - O Mistério'
56
58
]
57
59
}
58
60
}
59
61
},
60
62
computed: {
61
-
//a computed getter
63
+
//uma função "getter" computada (computed getter)
62
64
publishedBooksMessage() {
63
-
// `this` points to the vm instance
64
-
returnthis.author.books.length>0?'Yes':'No'
65
+
// `this` aponta para a instância Vue `vm` de `Vue.createApp(...)`
Here we have declared a computed property `publishedBooksMessage`.
81
+
Aqui declaramos um dado computado _(computed property)_ chamado`publishedBooksMessage`.
80
82
81
-
Try to change the value of `books` array in the application `data` and you will see how `publishedBooksMessage`is changing accordingly.
83
+
Tente remover os valores do vetor _(array)_`books`, encontrado dentro de `data`, e você visualizará o valor de `publishedBooksMessage`sendo atualizado.
82
84
83
-
You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.publishedBooksMessage`depends on`vm.author.books`, so it will update any bindings that depend on `vm.publishedBooksMessage`when `vm.author.books`changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand.
85
+
É possível vincular dados computados em _templates_ como qualquer outro tipo de dado. Vue tem ciência de que `vm.publishedBooksMessage`depende de`vm.author.books` para prover seu valor, portanto, ele irá atualizar qualquer vínculo de `vm.publishedBooksMessage`sempre que `vm.author.books`sofrer alterações. A melhor parte disto é que criamos tal relação de dependência de forma declarativa: a função _getter_ computada não possui quaisquer efeitos colaterais, tornando-se mais fácil de testar e entender.
84
86
85
-
### Computed Caching vs Methods
87
+
### Cache de `computed` vs. Métodos
86
88
87
-
You may have noticed we can achieve the same result by invoking a method in the expression:
89
+
Você pode ter notado que é possível obtermos o mesmo resultado ao chamarmos um método, como:
88
90
89
91
```html
90
92
<p>{{ calculateBooksMessage() }}</p>
91
93
```
92
94
93
95
```js
94
-
//in component
96
+
//no componente
95
97
methods: {
96
98
calculateBooksMessage() {
97
99
returnthis.author.books.length>0?'Yes':'No'
98
100
}
99
101
}
100
102
```
101
103
102
-
Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on their reactive dependencies.** A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as `author.books`has not changed, multiple access to the `publishedBooksMessage`computed property will immediately return the previously computed result without having to run the function again.
104
+
Ao invés de utilizar dados computados, podemos obter os mesmos resultados ao simplesmente utilizar métodos. No entanto, a diferença é que **dados computados possuem cache de acordo com suas dependências reativas**. Um dado computado, portanto, apenas será atualizado quando alguma de suas dependências sofrer alteração. Isto significa, por exemplo, que enquanto `author.books`não for alterado, o dado computado `publishedBooksMessage`irá retornar, imediatamente, o último resultado calculado, independente da quantidade de acessos que obter, sem ter de executar a função novamente.
103
105
104
-
This also means the following computed property will never update, because `Date.now()`is not a reactive dependency:
106
+
Isto também significa que o dado computado a seguir nunca será atualizado, já que `Date.now()`não é reconhecido como uma dependência reativa:
105
107
106
108
```js
107
109
computed: {
@@ -111,13 +113,13 @@ computed: {
111
113
}
112
114
```
113
115
114
-
In comparison, a method invocation will **always**run the function whenever a re-render happens.
116
+
Por outro lado, invocar um método **sempre**irá executar sua função quando ocorrer uma nova renderização.
115
117
116
-
Why do we need caching? Imagine we have an expensive computed property `list`, which requires looping through a huge array and doing a lot of computations. Then we may have other computed properties that in turn depend on `list`. Without caching, we would be executing `list`’s getter many more times than necessary! In cases where you do not want caching, use a `method` instead.
118
+
Por que precisamos de _caching_? Imagine que temos um dado computado `list` extremamente custoso, que requer iterar por um extenso vetor _(array)_ e realizar cálculos com seus valores. Além disto, há outros dados computados que dependem de `list`. Sem realizarmos o cache, `list` seria executado muito mais vezes do que o necessário! Se você realmente não desejar realizar o cache do valor calculado, utilize um método.
117
119
118
-
### Computed Setter
120
+
### Atribuição em Dados Computados
119
121
120
-
Computed properties are by default getter-only, but you can also provide a setter when you need it:
122
+
Dados computados _(computed properties)_ são, por padrão, _getter-only_ — ou seja, somente retornam valor. Entretanto, também é possível fornecer um _setter__(Computed Setter)_, se necessário:
121
123
122
124
```js
123
125
// ...
@@ -138,40 +140,41 @@ computed: {
138
140
// ...
139
141
```
140
142
141
-
Now when you run `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName`and`vm.lastName`will be updated accordingly.
143
+
Portanto, se executarmos `vm.fullName = 'John Doe'`, o _setter_ será executado e `vm.firstName`e`vm.lastName`serão atualizados, respectivamente.
142
144
143
-
## Watchers
145
+
## Observadores
144
146
145
-
While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That's why Vue provides a more generic way to react to data changes through the `watch` option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.
147
+
Enquanto dados computados são mais adequados na maioria dos casos, há certos momentos em que um observador _(watcher)_ personalizado se faz necessário. É por isto que o Vue fornece uma maneira mais genérica de reagir à alteração de dados, `watch`, que se faz útil a partir do momento em que performamos operações assíncronas ou complexas quando certo dado sofre mudanças.
146
148
147
-
For example:
149
+
Por exemplo:
148
150
149
151
```html
150
152
<divid="watch-example">
151
153
<p>
152
-
Ask a yes/no question:
154
+
Faça uma pergunta de sim ou não:
153
155
<inputv-model="question" />
154
156
</p>
155
157
<p>{{ answer }}</p>
156
158
</div>
157
159
```
158
160
159
161
```html
160
-
<!-- Since there is already a rich ecosystem of ajax libraries -->
161
-
<!-- and collections of general-purpose utility methods, Vue core -->
162
-
<!-- is able to remain small by not reinventing them. This also -->
163
-
<!-- gives you the freedom to use what you're familiar with. -->
162
+
<!-- Como já existe coleções com métodos utilitários de -->
163
+
<!-- propósitos gerais e um ecossistema rico de bibliotecas -->
164
+
<!-- Ajax, a base do Vue consegue se manter pequena por não -->
165
+
<!-- reinventar a roda e dar liberdade para que você possa -->
In this case, using the`watch` option allows us to perform an asynchronous operation (accessing an API) and sets a condition for performing this operation. None of that would be possible with a computed property.
212
+
Neste caso, ao usarmos`watch`, podemos executar uma operação assíncrona — como adquirir informações de uma _API_ — e, até mesmo, condições para executá-la. Isto não seria possível através da utilização de dados computados _(computed properties)_.
208
213
209
-
In addition to the `watch` option, you can also use the imperative [vm.\$watch API](../api/instance-methods.html#watch).
214
+
Além da opção `watch`, também é possível utilizar, de maneira imperativa, a [API vm.\$watch](../api/instance-methods.html#watch).
210
215
211
-
### Computed vs Watched Property
216
+
### Dados Computados vs Observadores
212
217
213
-
Vue does provide a more generic way to observe and react to data changes on a current active instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse`watch`- especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative`watch` callback. Consider this example:
218
+
Devido ao Vue oferecer **observadores**_(watchers)_ como uma maneira mais genérica de observar e reagir à mudanças em dados de uma instância, é tentador utilizar, excessivamente, o`watch`— especialmente se você possui conhecimentos prévios em AngularJS, por exemplo. No entanto, às vezes, é melhor utilizar um dado computado ao invés de`watch`. Considere o seguinte exemplo:
214
219
215
220
```html
216
221
<divid="demo">{{ fullName }}</div>
@@ -236,7 +241,7 @@ const vm = Vue.createApp({
236
241
}).mount('#demo')
237
242
```
238
243
239
-
The above code is imperative and repetitive. Compare it with a computed property version:
244
+
O código acima é imperativo e repetitivo. A seguir, uma versão do código utilizando dados computados, a fim de compará-los:
0 commit comments