Skip to content

Commit 55127a1

Browse files
committed
Review on api/basic-reactivity
1 parent aea7066 commit 55127a1

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

src/api/basic-reactivity.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# API's Básicas de Reatividade
22

3-
> Esta seção usa sintaxe de [componente de arquivo único](../guide/single-file-component.html) para exemplos de código
3+
> Esta seção usa sintaxe de [Componente Single-File](../guide/single-file-component.html) para exemplos de código
44
55
## `reactive`
66

@@ -10,17 +10,17 @@ Retorna uma cópia reativa do objeto.
1010
const obj = reactive({ count: 0 })
1111
```
1212

13-
A conversão reativa é "profunda" - ela afeta todas as propriedades aninhadas. Na implementação baseada em [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), o proxy retornado **não** é igual ao objeto original. Recomenda-se trabalhar exclusivamente com o proxy reativo e evitar depender do objeto original.
13+
A conversão reativa é "profunda" - ela afeta todas as propriedades aninhadas. Na implementação baseada no [Proxy da ES2015](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), o *proxy* retornado **não** é igual ao objeto original. Recomenda-se trabalhar exclusivamente com o *proxy* reativo e evitar depender do objeto original.
1414

15-
**Digitando:**
15+
**Tipagem:**
1616

1717
```ts
1818
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
1919
```
2020

2121
## `readonly`
2222

23-
Captura um objeto (reativo ou simples) ou uma [ref](./refs-api.html#ref) e retorna um proxy somente leitura para o original. Um proxy somente leitura é profundo: qualquer propriedade aninhada acessada também será somente leitura
23+
Captura um objeto (reativo ou simples) ou um [ref](./refs-api.html#ref) e retorna um *proxy* somente leitura para o original. Um *proxy* somente leitura é profundo: qualquer propriedade aninhada acessada também será somente leitura.
2424

2525
```js
2626
const original = reactive({ count: 0 })
@@ -30,22 +30,22 @@ const copy = readonly(original)
3030
watchEffect(() => {
3131
// realizando o rastreamento da reatividade
3232
console.log(copy.count)
33-
})
33+
})
3434
35-
// a mutação do "original" fará com que os observadores confiem na cópia
35+
// a mutação do "original" executará observadores confiando na cópia
3636
original.count++
3737
38-
// alterar a cópia irá falhar e resultará em um aviso
39-
copy.count++ // warning!
38+
// a mutação da cópia falhará e resultará em um aviso
39+
copy.count++ // aviso!
4040
```
4141

4242
## `isProxy`
4343

44-
Verifica se um objeto é um proxy criado por [`reactive`](#reactive) ou [`readonly`](#readonly).
44+
Verifica se um objeto é um *proxy* criado por [`reactive`](#reactive) ou [`readonly`](#readonly).
4545

4646
## `isReactive`
4747

48-
Verifica se um objeto é um proxy reativo criado por [`reactive`](#reactive).
48+
Verifica se um objeto é um *proxy* reativo criado por [`reactive`](#reactive).
4949

5050
```js
5151
import { reactive, isReactive } from 'vue'
@@ -59,7 +59,7 @@ export default {
5959
}
6060
```
6161

62-
Ele também retorna `true` se o proxy é criado por [`readonly`](#readonly), mas está envolvendo outro proxy criado por [`reactive`](#reactive).
62+
Ele também retorna `true` se o *proxy* foi criado por [`readonly`](#readonly), mas está envolvendo outro *proxy* criado por [`reactive`](#reactive).
6363

6464
```js{7-15}
6565
import { reactive, isReactive, readonly } from 'vue'
@@ -68,13 +68,13 @@ export default {
6868
const state = reactive({
6969
name: 'John'
7070
})
71-
// proxy "readonly"(somente de leitura) criado a partir de um objeto simples
71+
// proxy "readonly" (somente leitura) criado de um objeto simples
7272
const plain = readonly({
7373
name: 'Mary'
7474
})
7575
console.log(isReactive(plain)) // -> false
7676
77-
// proxy "readonly"(somente de leitura) criado a partir de um proxy "reactive"
77+
// proxy "readonly" (somente leitura) criado de um proxy "reactive"
7878
const stateCopy = readonly(state)
7979
console.log(isReactive(stateCopy)) // -> true
8080
}
@@ -83,11 +83,11 @@ export default {
8383

8484
## `isReadonly`
8585

86-
Verifica se um objeto é um proxy somente de leitura criado por [`readonly`](#readonly).
86+
Verifica se um objeto é um *proxy* somente leitura criado por [`readonly`](#readonly).
8787

8888
## `toRaw`
8989

90-
Retorna o objeto bruto original de um proxy [`reactive`](#reactive) ou [`readonly`](#readonly). Esta é uma "válvula de escape" que pode ser usada para ler temporariamente sem incorrer em acesso de proxy/sobrecarga de rastreamento ou gravação sem acionar alterações. **Não** é recomendado manter uma referência persistente ao objeto original. Use com cuidado
90+
Retorna o objeto bruto (*raw*) original de um *proxy* [`reactive`](#reactive) ou [`readonly`](#readonly). Esta é uma "válvula de escape" que pode ser usada para ler temporariamente sem incorrer em acesso de *proxy*/sobrecarga de rastreamento ou gravação sem acionar alterações. **Não** é recomendado manter uma referência persistente ao objeto original. Use com cuidado.
9191

9292
```js
9393
const foo = {}
@@ -98,7 +98,7 @@ console.log(toRaw(reactiveFoo) === foo) // true
9898

9999
## `markRaw`
100100

101-
Marca um objeto para que nunca seja convertido em proxy. Retorna o próprio objeto.
101+
Marca um objeto para que nunca seja convertido em *proxy*. Retorna o próprio objeto.
102102

103103
```js
104104
const foo = markRaw({})
@@ -109,14 +109,14 @@ const bar = reactive({ foo })
109109
console.log(isReactive(bar.foo)) // false
110110
```
111111

112-
::: Atenção
113-
`markRaw` e as APIs shallowXXX abaixo permitem que você desative seletivamente a conversão profunda reativa/somente de leitura padrão e incorpore objetos brutos e não proxy em seu gráfico de estado. Eles podem ser usados por vários motivos:
112+
::: warning Aviso
113+
`markRaw` e as APIs *shallowXXX* abaixo permitem que você desative seletivamente a conversão profunda reativa/somente leitura padrão e incorpore objetos brutos e não-*proxy* em seu gráfico de estado. Eles podem ser usados por vários motivos:
114114

115115
- Alguns valores simplesmente não devem se tornar reativos, por exemplo, uma instância complexa de classe de terceiros, ou um objeto de componente Vue.
116116

117-
- Ignorar a conversão de proxy pode fornecer melhorias de desempenho ao renderizar grandes listas com fontes de dados imutáveis.
117+
- Ignorar a conversão de *proxy* pode fornecer melhorias de desempenho ao renderizar grandes listas com fontes de dados imutáveis.
118118

119-
Eles são considerados avançados porque a desativação bruta está apenas no nível raiz, portanto, se você definir um objeto bruto aninhado e não marcado em um objeto reativo e acessá-lo novamente, obterá a versão em proxy de volta. Isso pode levar a **riscos de identidade** - ou seja, realizar uma operação que depende da identidade do objeto, mas usando a versão bruta e a versão proxy do mesmo objeto:
119+
Eles são considerados avançados porque a desativação bruta está apenas no nível raiz, portanto, se você definir um objeto bruto aninhado e não marcado em um objeto reativo e acessá-lo novamente, obterá a versão em *proxy* de volta. Isso pode levar a **riscos de identidade** - ou seja, realizar uma operação que depende da identidade do objeto, mas usando ambas a versão bruta e a versão *proxy* do mesmo objeto:
120120

121121
```js
122122
const foo = markRaw({
@@ -136,7 +136,7 @@ Riscos de identidade são geralmente raros. No entanto, para utilizar adequadame
136136

137137
## `shallowReactive`
138138

139-
Cria um proxy reativo que rastreia a reatividade de suas próprias propriedades, mas não executa conversão reativa profunda de objetos aninhados (expõe valores brutos).
139+
Cria um *proxy* reativo que rastreia a reatividade de suas próprias propriedades, mas não executa conversão reativa profunda de objetos aninhados (expõe valores brutos).
140140

141141
```js
142142
const state = shallowReactive({
@@ -146,16 +146,16 @@ const state = shallowReactive({
146146
}
147147
})
148148
149-
// as próprias propriedades do estado mutante são reativas
149+
// a mutação das próprias propriedades do "state" é reativa
150150
state.foo++
151-
// ...mas não às converte em objetos aninhados
151+
// ...mas não converte objetos aninhados
152152
isReactive(state.nested) // false
153153
state.nested.bar++ // não reativo
154154
```
155155

156156
## `shallowReadonly`
157157

158-
Cria um proxy que torna suas próprias propriedades somente de leitura, mas não executa a conversão somente leitura de profunda de objetos aninhados (expõe valores brutos).
158+
Cria um *proxy* que torna suas próprias propriedades em somente leitura, mas não executa a conversão somente leitura profunda de objetos aninhados (expõe valores brutos).
159159

160160
```js
161161
const state = shallowReadonly({
@@ -165,9 +165,9 @@ const state = shallowReadonly({
165165
}
166166
})
167167
168-
// as próprias propriedades do estado mutante irão falhar
168+
// a mutação das próprias propriedades do "state" irão falhar
169169
state.foo++
170170
// ...mas funciona em objetos aninhados
171171
isReadonly(state.nested) // false
172172
state.nested.bar++ // funciona
173-
```
173+
```

0 commit comments

Comments
 (0)