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 pressupõe que você já leu [Componentes Básicos](component-basics.md). Leia isso 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
+
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:
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`.
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`.
23
23
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:
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>`:
25
25
26
26
```vue-html
27
-
<!-- Inactive components will be cached! -->
27
+
<!-- Os componentes inativos serão armazenados em cache! -->
Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered.
42
+
Agora a guia _Postagens_ mantém seu estado (a postagem selecionada) mesmo quando não é renderizada.
43
43
44
-
Check out more details on `<keep-alive>`in the [API reference](../api/built-in-components.html#keep-alive).
44
+
Confira mais detalhes sobre `<keep-alive>`na [Referência da API](../api/built-in-components.html#keep-alive).
45
45
46
-
## Async Components
46
+
## Componentes Assíncronos
47
47
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:
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`:
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.
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.
66
66
67
-
You can also return a`Promise`in the factory function, so with Webpack 2 or later and ES2015 syntax you can do:
67
+
Você também pode retornar uma`Promise`na _factory function_, com o Webpack 2 ou posterior e a sintaxe 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.
96
+
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
97
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.
98
+
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
99
100
-
You can check the list of available options in the [API Reference](../api/global-api.html#arguments-4)
100
+
Você pode conferir a lista de opções disponíveis na [Referência da API](../api/global-api.html#arguments-4)
0 commit comments