Skip to content

Translation of parts added after upstream sync #276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Feb 24, 2022
38 changes: 19 additions & 19 deletions src/api/directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -298,14 +298,14 @@
<svg><a :xlink:special="foo"></a></svg>
```

When setting a binding on an element, Vue by default checks whether the element has the key defined as a property using an `in` operator check. If the property is defined, Vue will set the value as a DOM property instead of an attribute. This should work in most cases, but you can override this behavior by explicitly using `.prop` or `.attr` modifiers. This is sometimes necessary, especially when [working with custom elements](/guide/web-components.html#passing-dom-properties).
Ao definir um vínculo em um elemento, o Vue por padrão verifica se o elemento tem a chave definida como uma propriedade usando uma verificação com operador `in`. Se a propriedade estiver definida, o Vue definirá o valor como uma propriedade DOM ao invés de um atributo. Isso deve funcionar na maioria dos casos, mas você pode substituir esse comportamento explicitamente usando os modificadores `.prop` ou `.attr`. Isso às vezes é necessário, especialmente ao [trabalhar com elementos personalizados](/guide/web-components.html#passing-dom-properties).

The `.prop` modifier also has a dedicated shorthand, `.`:
O modificador `.prop` também tem uma abreviação dedicada, `.`:

```html
<div :someProperty.prop="someObject"></div>

<!-- equivalent to -->
<!-- equivalente a -->
<div .someProperty="someObject"></div>
```

Expand Down Expand Up @@ -463,52 +463,52 @@
</ul>
```

Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo).
Desde a versão 3.2, você também pode memorizar parte do _template_ com condições de invalidação usando [`v-memo`](#v-memo).

- **Ver também:**
- [Sintaxe de Templates - Interpolações](../guide/template-syntax.html#texto)
- [v-memo](#v-memo)

## v-memo <Badge text="3.2+" />

- **Expects:** `Array`
- **Espera:** `Array`

- **Details:**
- **Detalhes:**

Memoize a sub-tree of the template. Can be used on both elements and components. The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. For example:
Memorize uma subárvore do _template_. Pode ser usado em elementos e componentes. A diretiva espera um array com comprimento fixo e valores das dependências para comparar na memorização. Se todos os valores do array forem iguais à última renderização, as atualizações de toda a subárvore serão ignoradas. Por exemplo:

```html
<div v-memo="[valueA, valueB]">
...
</div>
```

When the component re-renders, if both `valueA` and `valueB` remain the same, all updates for this `<div>` and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused.
Quando o componente for renderizado novamente, se `valueA` e `valueB` permanecerem os mesmos, todas as atualizações para esta `<div>` e seus filhos serão ignoradas. Na verdade, mesmo a criação do VNode no DOM Virtual também será pulada, pois a cópia memorizada da subárvore pode ser reutilizada.

It is important to specify the memoization array correctly, otherwise we may skip updates that should indeed be applied. `v-memo` with an empty dependency array (`v-memo="[]"`) would be functionally equivalent to `v-once`.
É importante especificar o array de memorização corretamente, caso contrário podemos pular atualizações que realmente deveriam ser aplicadas. `v-memo` com um array de dependências vazio (`v-memo="[]"`) seria funcionalmente equivalente a `v-once`.

**Usage with `v-for`**
**Uso com `v-for`**

`v-memo` is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large `v-for` lists (where `length > 1000`):
O `v-memo` é fornecido apenas para micro otimizações em cenários de desempenho crítico e raramente deve ser necessário. O caso mais comum em que isso pode ser útil é ao renderizar grandes listas `v-for` (onde `length > 1000`):

```html
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
<p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
<p>...more child nodes</p>
<p>ID: {{ item.id }} - selecionado: {{ item.id === selected }}</p>
<p>...mais nós filhos</p>
</div>
```

When the component's `selected` state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying "only update this item if it went from non-selected to selected, or the other way around". This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`.
Quando o estado de `selected` no componente muda, uma grande quantidade de VNodes será criada mesmo que a maioria dos itens permaneçam exatamente os mesmos. O uso do `v-memo` aqui está basicamente dizendo "apenas atualize este item se ele for de não selecionado para selecionado, ou o contrário". Isso permite que cada item não afetado reutilize seu VNode anterior e pule totalmente a diferenciação. Note que não precisamos incluir `item.id` no array de dependências do _memo_ aqui já que o Vue automaticamente o infere do `:key` do item.

:::warning
When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.**
:::warning Aviso
Ao usar `v-memo` com `v-for`, certifique-se de que eles sejam usados ​​no mesmo elemento. **`v-memo` não funciona dentro de `v-for`.**
:::

`v-memo` can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized. But again, it is the developer's responsibility to specify correct dependency arrays to avoid skipping necessary updates.
O `v-memo` também pode ser usado em componentes para impedir manualmente atualizações indesejadas em certos casos extremos em que a verificação de atualização do componente filho foi desotimizada. Mas novamente, é responsabilidade do desenvolvedor especificar os arrays de dependências corretas para evitar pular as atualizações necessárias.

- **See also:**
- **Ver também:**
- [v-once](#v-once)

## v-is <Badge text="deprecated" type="warning" />

Deprecated in 3.1.0. Use [`is` attribute with `vue:` prefix](/api/special-attributes.html#is) instead.
Obsoleto na 3.1.0. Use [o atributo `is` com o prefixo `vue:`](/api/special-attributes.html#is).
2 changes: 1 addition & 1 deletion src/guide/composition-api-introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ Agora que já sabemos o **porquê**, podemos chegar ao **como**. Para começar a
A nova opção de componente `setup` é executada **antes** do componente ser criado, uma vez que as `props` estão resolvidas, e serve como ponto de entrada para APIs de composição.

::: warning Aviso
You should avoid using `this` inside `setup` as it won't refer to the component instance. `setup` is called before `data` properties, `computed` properties or `methods` are resolved, so they won't be available within `setup`.
Você deve evitar usar `this` dentro de `setup`, pois não fará referência à instância do componente. `setup` é chamado antes das propriedades `data`, `computed` ou `methods` serem resolvidas, então elas não estarão disponíveis em `setup`.
:::

A opção `setup` deve ser uma função que aceita `props` e `context`, sobre os quais falaremos [depois](composition-api-setup.html#argumentos). Além disso, tudo o que retornamos de `setup` será exposto ao resto do nosso componente (dados computados, métodos, gatilhos de ciclo de vida e assim por diante), bem como ao _template_ do componente.
Expand Down
24 changes: 12 additions & 12 deletions src/guide/migration/events-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,17 @@ Removemos os métodos `$on`, `$off` e `$once` da instância completamente. `$emi

## Estratégia de Migração

[Migration build flag: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-configuration)
[Sinalizador na compilação de migração: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-configuration)

In Vue 3, it is no longer possible to use these APIs to listen to a component's own emitted events from within a component. There is no migration path for that use case.
No Vue 3, não é mais possível usar essas APIs para ouvir os próprios eventos emitidos de um componente de dentro de um componente. Não há caminho de migração para esse caso de uso.

### Root Component Events
### Eventos do Componente Raiz

Static event listeners can be added to the root component by passing them as props to `createApp`:
Os escutadores de evento estáticos podem ser adicionados ao componente raiz passando-os como props para `createApp`:

```js
createApp(App, {
// Listen for the 'expand' event
// Escuta o evento 'expand'
onExpand() {
console.log('expand')
}
Expand All @@ -93,12 +93,12 @@ export default {
}
```

This provides the same event emitter API as in Vue 2.
Isso fornece a mesma API de emissor de eventos que no Vue 2.

In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term. Depending on the circumstances, there are various alternatives to using an event bus:
Na maioria das circunstâncias, o uso de um _event bus_ global para comunicação entre componentes é desencorajado. Embora muitas vezes seja a solução mais simples a curto prazo, quase invariavelmente prova ser uma dor de cabeça de manutenção a longo prazo. Dependendo das circunstâncias, existem várias alternativas ao uso de um _event bus_:

* [Props](/guide/component-basics.html#passing-data-to-child-components-with-props) and [events](/guide/component-basics.html#listening-to-child-components-events) should be your first choice for parent-child communication. Siblings can communicate via their parent.
* [Provide and inject](/guide/component-provide-inject.html) allow a component to communicate with its slot contents. This is useful for tightly-coupled components that are always used together.
* `provide`/`inject` can also be used for long-distance communication between components. It can help to avoid 'prop drilling', where props need to be passed down through many levels of components that don't need those props themselves.
* Prop drilling can also be avoided by refactoring to use slots. If an interim component doesn't need the props then it might indicate a problem with separation of concerns. Introducing a slot in that component allows the parent to create the content directly, so that props can be passed without the interim component needing to get involved.
* [Global state management](/guide/state-management.html), such as [Vuex](https://next.vuex.vuejs.org/).
* [Props](/guide/component-basics.html#passando-dados-aos-filhos-com-propriedades) e [eventos](/guide/component-basics.html#escutando-eventos-dos-filhos) deve ser sua primeira escolha para comunicação entre pais e filhos. Irmãos podem se comunicar através de seus pais.
* [Prover e injetar](/guide/component-provide-inject.html) permite que um componente se comunique com seu conteúdo de slot. Isso é útil para componentes fortemente acoplados que são sempre usados ​​juntos.
* `provide`/`inject` também pode ser usado para comunicação de longa distância entre componentes. Isso pode ajudar a evitar a 'perfuração com props', onde as props precisam ser passadas abaixo por muitos níveis de componentes que não precisam delas.
* A perfuração com props também pode ser evitada refatorando para usar slots. Se um componente provisório não precisar das props, isso pode indicar um problema com a separação de preocupações. A introdução de um slot nesse componente permite que o pai crie o conteúdo diretamente, para que as props possam ser passadas sem que o componente provisório precise se envolver.
* [Gerenciamento de estado global](/guide/state-management.html), como [Vuex](https://next.vuex.vuejs.org/).
4 changes: 2 additions & 2 deletions src/guide/migration/keycode-modifiers.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ Como um resultado, isso significa que `config.keyCodes` também está obsoleto e

Para aqueles que utilizam `keyCode` em sua base de código, nós recomendamos convertê-los para os nomes kebab-cased equivalentes.

The keys for some punctuation marks can just be included literally. e.g. For the `,` key:
As teclas para alguns sinais de pontuação podem ser incluídas literalmente. por exemplo. Para a tecla `,`:

```html
<input v-on:keypress.,="commaPress">
```

Limitations of the syntax prevent certain characters from being matched, such as `"`, `'`, `/`, `=`, `>`, and `.`. For those characters you should check `event.key` inside the listener instead.
As limitações da sintaxe impedem que certos caracteres sejam correspondidos, como `"`, `'`, `/`, `=`, `>` e `.`. Para esses caracteres você deve verificar `event.key` dentro do escutador em vez disso.

[Migration build flags:](migration-build.html#compat-configuration)

Expand Down
6 changes: 3 additions & 3 deletions src/guide/migration/transition.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Os nomes de propriedades do componente `<transition>` relacionadas também foram
2. Substitua instâncias de `.v-leave` por `.v-leave-from`
3. Substitua instâncias de nomes de propriedades relacionadas, como acima.

## See also
## Ver também

- [`<Transition>` as a root can no longer be toggled from the outside](/guide/migration/transition-as-root.html)
- [`<TransitionGroup>` now renders no wrapper element by default](/guide/migration/transition-group.html)
- [`<Transition>` como uma raiz não pode mais ser alternada do lado de fora](/guide/migration/transition-as-root.html)
- [`<TransitionGroup>` agora não renderiza nenhum elemento _wrapper_ por padrão](/guide/migration/transition-group.html)
6 changes: 3 additions & 3 deletions src/guide/migration/v-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,6 @@ Nós recomendamos:

Para mais informações na nova sintaxe do `v-model`, veja:

- [Utilizando `v-model` em Componentes](../component-basics.html#using-v-model-on-components)
- [Argumentos do `v-model`](../component-custom-events.html#v-model-arguments)
- [Tratando modificadores do `v-model`](../component-custom-events.html#handling-v-model-modifiers)
- [Utilizando `v-model` em Componentes](../component-basics.html#usando-v-model-em-componentes)
- [Argumentos do `v-model`](../component-custom-events.html#argumentos-do-v-model)
- [Tratando modificadores do `v-model`](../component-custom-events.html#manipulando-modificadores-do-v-model)
Loading