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
> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
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
-
## Dynamic Components with`keep-alive`
5
+
## Componentes Dinâmicos com`keep-alive`
6
6
7
-
Earlier, we used the`is`attribute to switch between components in a tabbed interface:
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
-
When switching between these components though, you'll sometimes want to maintain their state or avoid re-rendering for performance reasons. For example, when expanding our tabbed interface a little:
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:
<common-codepen-snippettitle="Componentes Dinâmicos: sem keep-alive"slug="jOPjZOe" />
21
16
22
-
You'll notice that if you select a post, switch to the _Archive_ tab, then switch back to _Posts_, it's no longer showing the post you selected. That's because each time you switch to a new tab, Vue creates a new instance of the`currentTabComponent`.
17
+
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
18
24
-
Recreating dynamic components is normally useful behavior, but in this case, we'd really like those tab component instances to be cached once they're created for the first time. To solve this problem, we can wrap our dynamic component with a`<keep-alive>` element:
19
+
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
20
26
21
```vue-html
27
-
<!-- Inactive components will be cached! -->
22
+
<!-- Componentes inativos serão armazenados em cache -->
<common-codepen-snippettitle="Componentes Dinâmicos: com keep-alive"slug="VwLJQvP" />
41
31
42
-
Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered.
32
+
Agora, a guia _Postagens_ mantém seu estado (a postagem selecionada) mesmo quando não é renderizada.
43
33
44
-
Check out more details on `<keep-alive>`in the [API reference](../api/built-in-components.html#keep-alive).
34
+
Confira mais detalhes sobre `<keep-alive>`em [Referências de API](../api/built-in-components.html#keep-alive).
45
35
46
-
## Async Components
36
+
## Componentes Assíncronos
47
37
48
-
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a `defineAsyncComponent` method:
38
+
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`:
As you can see, this method accepts a factory function returning a `Promise`. Promise's `resolve`callback should be called when you have retrieved your component definition from the server. You can also call`reject(reason)`to indicate the load has failed.
55
+
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
56
67
-
You can also return a`Promise`in the factory function, so with Webpack 2 or later and ES2015 syntax you can do:
57
+
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:
Async components are _suspensible_ by default. This means if it has a[`<Suspense>`](TODO)in the parent chain, it will be treated as an async dependency of that `<Suspense>`. In this case, the loading state will be controlled by the`<Suspense>`, and the component's own loading, error, delay and timeout options will be ignored.
86
+
Os componentes assíncronos são _suspensos_ por padrão. Isso significa que, se houver um[`<Suspense>`](TODO)na cadeia (pai), ele será tratado como uma dependência assíncrona desse `<Suspense>`. Nesse caso, o estado de carregamento vai se controlado pelo`<Suspense>`, e as opções de carregamento, erro, atraso e tempo limite do próprio componente serão ignoradas.
97
87
98
-
The async component can opt-out of `Suspense`control and let the component always control its own loading state by specifying`suspensible: false`in its options.
88
+
O componente assíncrono pode cancelar o controle do `Suspense`e deixar que o componente sempre controle seu próprio estado de carregamento, especificando`suspensible: false`em suas opções.
99
89
100
-
You can check the list of available options in the [API Reference](../api/global-api.html#arguments-4)
90
+
Você pode conferir a lista de opções disponíveis na [Referência da API](../api/global-api.html#arguments-4)
0 commit comments