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/component-dynamic-async.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,16 @@
1
-
# Componentes Dinâmicos e Assíncronos
1
+
# Dinâmicos & Assíncronos
2
2
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 lá primeiro se você for novo em componentes.
4
4
5
-
## Componentes dinâmicos com `keep-alive`
5
+
## Componentes Dinâmicos com `keep-alive`
6
6
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:
8
8
9
9
```vue-html
10
10
<component :is="currentTabComponent"></component>
11
11
```
12
12
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:
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`.
23
23
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>`:
25
25
26
26
```vue-html
27
-
<!-- Os componentes inativos serão armazenados em cache! -->
27
+
<!-- Componentes inativos serão armazenados em cache -->
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.
43
43
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).
45
45
46
46
## Componentes Assíncronos
47
47
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`:
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.
66
66
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:
0 commit comments