|
298 | 298 | <svg><a :xlink:special="foo"></a></svg>
|
299 | 299 | ```
|
300 | 300 |
|
301 |
| - 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). |
| 301 | + 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). |
302 | 302 |
|
303 |
| - The `.prop` modifier also has a dedicated shorthand, `.`: |
| 303 | + O modificador `.prop` também tem uma abreviação dedicada, `.`: |
304 | 304 |
|
305 | 305 | ```html
|
306 | 306 | <div :someProperty.prop="someObject"></div>
|
307 | 307 |
|
308 |
| - <!-- equivalent to --> |
| 308 | + <!-- equivalente a --> |
309 | 309 | <div .someProperty="someObject"></div>
|
310 | 310 | ```
|
311 | 311 |
|
|
463 | 463 | </ul>
|
464 | 464 | ```
|
465 | 465 |
|
466 |
| - Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo). |
| 466 | + 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). |
467 | 467 |
|
468 | 468 | - **Ver também:**
|
469 | 469 | - [Sintaxe de Templates - Interpolações](../guide/template-syntax.html#texto)
|
470 | 470 | - [v-memo](#v-memo)
|
471 | 471 |
|
472 | 472 | ## v-memo <Badge text="3.2+" />
|
473 | 473 |
|
474 |
| -- **Expects:** `Array` |
| 474 | +- **Espera:** `Array` |
475 | 475 |
|
476 |
| -- **Details:** |
| 476 | +- **Detalhes:** |
477 | 477 |
|
478 |
| - 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: |
| 478 | + 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: |
479 | 479 |
|
480 | 480 | ```html
|
481 | 481 | <div v-memo="[valueA, valueB]">
|
482 | 482 | ...
|
483 | 483 | </div>
|
484 | 484 | ```
|
485 | 485 |
|
486 |
| - 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. |
| 486 | + 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. |
487 | 487 |
|
488 |
| - 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`. |
| 488 | + É 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`. |
489 | 489 |
|
490 |
| - **Usage with `v-for`** |
| 490 | + **Uso com `v-for`** |
491 | 491 |
|
492 |
| - `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`): |
| 492 | + 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`): |
493 | 493 |
|
494 | 494 | ```html
|
495 | 495 | <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
|
496 |
| - <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p> |
497 |
| - <p>...more child nodes</p> |
| 496 | + <p>ID: {{ item.id }} - selecionado: {{ item.id === selected }}</p> |
| 497 | + <p>...mais nós filhos</p> |
498 | 498 | </div>
|
499 | 499 | ```
|
500 | 500 |
|
501 |
| - 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`. |
| 501 | + 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. |
502 | 502 |
|
503 |
| - :::warning |
504 |
| - When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.** |
| 503 | + :::warning Aviso |
| 504 | + 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`.** |
505 | 505 | :::
|
506 | 506 |
|
507 |
| - `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. |
| 507 | + 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. |
508 | 508 |
|
509 |
| -- **See also:** |
| 509 | +- **Ver também:** |
510 | 510 | - [v-once](#v-once)
|
511 | 511 |
|
512 | 512 | ## v-is <Badge text="deprecated" type="warning" />
|
513 | 513 |
|
514 |
| -Deprecated in 3.1.0. Use [`is` attribute with `vue:` prefix](/api/special-attributes.html#is) instead. |
| 514 | +Obsoleto na 3.1.0. Use [o atributo `is` com o prefixo `vue:`](/api/special-attributes.html#is). |
0 commit comments