Skip to content

Commit 7659e86

Browse files
committed
fix: Corrections in the translation, in order to follow the official translation of v2
1 parent 54876fe commit 7659e86

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

src/guide/component-dynamic-async.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
# Componentes Dinâmicos e Assíncronos
1+
# Dinâmicos & Assíncronos
22

3-
> Essa página pressupõe que você já leu [Componentes Básicos](component-basics.md). Leia isso primeiro se você for novo em componentes.
3+
> Essa página assume que você já leu o [Básico sobre Componentes](component-basics.md). Leia primeiro se você for novo em componentes.
44
5-
## Componentes dinâmicos com `keep-alive`
5+
## Componentes Dinâmicos com `keep-alive`
66

7-
Anteriormente, usamos o atributo `is` para alternar entre os componentes em uma _interface_ com guias:
7+
Anteriormente, usamos o atributo `is` para alternar entre os componentes em uma interface com guias:
88

99
```vue-html
1010
<component :is="currentTabComponent"></component>
1111
```
1212

13-
Todavia, ao alternar entre esses componentes, às vezes você desejará manter seu estado ou evitar uma nova renderização por motivos de desempenho. Por exemplo, vamos expandir um pouco nossa _interface_ com guias:
13+
Ao alternar entre esses componentes, às vezes, você desejará manter seu estado ou evitar uma nova renderização, por motivos de desempenho. Por exemplo, ao expandir nossa interface com guias um pouco:
1414

1515
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="jOPjZOe" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Dynamic components: without keep-alive">
1616
<span>Veja o Pen <a href="https://codepen.io/team/Vue/pen/jOPjZOe">
@@ -19,12 +19,12 @@ Todavia, ao alternar entre esses componentes, às vezes você desejará manter s
1919
</p>
2020
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
2121

22-
Você notará que, se selecionar uma postagem, alternar para a guia _Arquivo_ e, em seguida, voltar para _Postagens_, ela não estará mais mostrando a postagem que você selecionou. Isso porque, a cada vez que você muda para uma nova guia, o Vue cria uma instância do `currentTabComponent`.
22+
Você notará que, se selecionar uma postagem, alternar para a guia _Arquivo_ e, em seguida, voltar para _Postagens_, ela não estará mais mostrando a postagem selecionada. Isso acontece pois, cada vez que você muda para uma nova guia, o Vue cria uma nova instância do componente `currentTabComponent`.
2323

24-
Recriar componentes dinâmicos normalmente é um comportamento útil, mas neste caso, realmente gostaríamos que essas instâncias do componente de guia fossem armazenadas em _cache_ assim que fosserm criadas pela primeira vez. Para resolver esse problema, podemos envolver nosso componente dinâmico com um elemento `<keep-alive>`:
24+
Recriar componentes dinâmicos normalmente é um comportamento útil, mas, nesse caso, gostaríamos que essas instâncias de componentes de guias fossem armazenadas em _cache_ assim que fossem criadas pela primeira vez. Para resolver este problema, podemos envolver nosso componente dinâmico com um elemento `<keep-alive>`:
2525

2626
```vue-html
27-
<!-- Os componentes inativos serão armazenados em cache! -->
27+
<!-- Componentes inativos serão armazenados em cache -->
2828
<keep-alive>
2929
<component :is="currentTabComponent"></component>
3030
</keep-alive>
@@ -39,13 +39,13 @@ Confira o resultado abaixo:
3939
</p>
4040
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
4141

42-
Agora a guia _Postagens_ mantém seu estado (a postagem selecionada) mesmo quando não é renderizada.
42+
Agora, a guia _Postagens_ mantém seu estado (a postagem selecionada) mesmo quando não é renderizada.
4343

44-
Confira mais detalhes sobre `<keep-alive>` na [Referência da API](../api/built-in-components.html#keep-alive).
44+
Confira mais detalhes sobre `<keep-alive>` em [Referências de API](../api/built-in-components.html#keep-alive).
4545

4646
## Componentes Assíncronos
4747

48-
Em grandes aplicações, podemos precisar dividir o aplicativo em pedaços menores e carregar um componente do servidor apenas quando for necessário. Para tornar isso possível, o Vue tem o método `defineAsyncComponent`:
48+
Em aplicativos grandes, talvez seja necessário dividí-lo em partes menores e carregar apenas um componente do servidor quando necessário.. Para tornar isso possível, o Vue tem o método `defineAsyncComponent`:
4949

5050
```js
5151
const app = Vue.createApp({})
@@ -62,9 +62,9 @@ const AsyncComp = Vue.defineAsyncComponent(
6262
app.component('async-example', AsyncComp)
6363
```
6464

65-
Como você pode ver, esse método aceita uma função de fábrica(_factory function_) que retorna uma `Promise`. O _callback_ `resolve` da Promise deve ser chamado quando você recupera a definição do componente do servidor. Você também pode chamar o `reject(motivo)` para indicar que o carregamento falhou.
65+
Como você pode ver, esse método aceita uma função de fabricação (_factory function_) que retorna uma `Promise`. O retorno de chamada `resolve` da Promise deve ser chamado quando você recuperar sua definição de componente do servidor. Você também pode chamar `reject(reason)` para indicar que o carregamento falhou.
6666

67-
Você também pode retornar uma `Promise` na _factory function_, com o Webpack 2 ou posterior e a sintaxe ES2015, você pode fazer:
67+
Você também pode retornar uma `Promise` na função de fabricação. Portanto, com a sintaxe do Webpack 2+ ou ES2015, você pode fazer:
6868

6969
```js
7070
import { defineAsyncComponent } from 'vue'

0 commit comments

Comments
 (0)