|
299 | 299 | <svg><a :xlink:special="foo"></a></svg>
|
300 | 300 | ```
|
301 | 301 |
|
302 |
| - 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). |
| 302 | + 要素にバインディングを設定する際、Vue はデフォルトで、`in` オペレータチェックを使って、要素にプロパティとして定義されたキーがあるかどうかをチェックします。プロパティが定義されている場合、Vue はその値を属性としてではなく DOM プロパティとして設定します。これはほとんどのケースで動作しますが、`.prop` や `.attr` 修飾子を明示的に使うことで、この振る舞いを上書きすることができます。これは特に [カスタム要素を使っている場合](/guide/web-components.html#passing-dom-properties) に必要なときがあります。 |
303 | 303 |
|
304 |
| - The `.prop` modifier also has a dedicated shorthand, `.`: |
| 304 | + この `.prop` 修飾子には `.` という省略記法もあります: |
305 | 305 |
|
306 | 306 | ```html
|
307 | 307 | <div :someProperty.prop="someObject"></div>
|
308 | 308 |
|
309 |
| - <!-- equivalent to --> |
| 309 | + <!-- 次と同じです --> |
310 | 310 | <div .someProperty="someObject"></div>
|
311 | 311 | ```
|
312 | 312 |
|
|
464 | 464 | </ul>
|
465 | 465 | ```
|
466 | 466 |
|
467 |
| - Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo). |
| 467 | + 3.2 以降では、[`v-memo`](#v-memo) を使って無効な条件のテンプレートの一部をメモ化することもできます。 |
468 | 468 |
|
469 | 469 | - **参照:**
|
470 | 470 | - [データバインディング構文 - 展開](../guide/template-syntax.html#テキスト)
|
471 | 471 | - [v-memo](#v-memo)
|
472 | 472 |
|
473 | 473 | ## v-memo <Badge text="3.2+" />
|
474 | 474 |
|
475 |
| -- **Expects:** `Array` |
| 475 | +- **受け入れ型:** `Array` |
476 | 476 |
|
477 |
| -- **Details:** |
| 477 | +- **詳細:** |
478 | 478 |
|
479 |
| - 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: |
| 479 | + テンプレートのサブツリーをメモ化します。要素とコンポーネントのどちらでも使えます。このディレクティブは、メモ化のために比較する依存関係にある値の固定長配列を受け取ります。配列のすべての値が最後のレンダリングと同じならば、サブツリー全体の更新は省略されます。例えば: |
480 | 480 |
|
481 | 481 | ```html
|
482 | 482 | <div v-memo="[valueA, valueB]">
|
483 | 483 | ...
|
484 | 484 | </div>
|
485 | 485 | ```
|
486 | 486 |
|
487 |
| - 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. |
| 487 | + コンポーネントが再レンダリングされるとき、`valueA` と `valueB` の両方が同じであれば、この `<div>` とその子のすべての更新は省略されます。実際には、サブツリーのメモ化されたコピーを再利用できるため、仮想 DOM の VNode の作成も省略されます。 |
488 | 488 |
|
489 |
| - 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`. |
| 489 | + メモ化した配列を正しく指定することは重要で、そうでなければ実際に適用する必要がある更新を省略してしまう可能性があります。空の依存配列を持つ `v-memo` つまり (`v-memo="[]"`) は、機能的に `v-once` と同じです。 |
490 | 490 |
|
491 |
| - **Usage with `v-for`** |
| 491 | + **`v-for` との使用方法** |
492 | 492 |
|
493 |
| - `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`): |
| 493 | + `v-memo` は、パフォーマンスが重要視される場面での極々小さな最適化のためだけに提供されていて、ほとんど必要とされないはずです。これが役立つ最も一般的なケースは、巨大な `v-for` リスト(`length > 1000` の場合)をレンダリングするときです: |
494 | 494 |
|
495 | 495 | ```html
|
496 | 496 | <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
|
|
499 | 499 | </div>
|
500 | 500 | ```
|
501 | 501 |
|
502 |
| - 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`. |
| 502 | + このコンポーネントの `selected` 状態が変更されると、ほとんどのアイテムが完全に同じにも関わらず、大量の VNode が作成されます。ここでの `v-memo` の使い方は、基本的に「このアイテムが非選択状態から選択状態になった場合、またはその逆の場合にのみ更新する」というものです。これは影響を受けていないすべてのアイテムが以前の VNode を再利用し、差分を完全に省略することができます。Vue はアイテムの `:key` から自動的に推測するため、メモ化の依存配列に `item.id` を含める必要はありません。 |
503 | 503 |
|
504 | 504 | :::warning
|
505 |
| - When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.** |
| 505 | + `v-memo` を `v-for` と一緒に使うとき、同じ要素に使われていることを確認してください。 **`v-memo` は `v-for` の中では動作しません。** |
506 | 506 | :::
|
507 | 507 |
|
508 |
| - `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. |
| 508 | + `v-memo` はコンポーネントに使って、その子コンポーネントの更新チェックが最適化されていないような特定のエッジケースで、不要な更新を手動で防ぐこともできます。しかし繰り返しますが、正しい依存配列を指定して、必要な更新を省略しないようにすることは、開発者の責任です。 |
509 | 509 |
|
510 |
| -- **See also:** |
| 510 | +- **参照:** |
511 | 511 | - [v-once](#v-once)
|
512 | 512 |
|
513 | 513 | ## v-is <Badge text="deprecated" type="warning" />
|
|
0 commit comments