Skip to content

Commit 2647b0b

Browse files
authored
docs: update "Static Hoisting" to "Cache Static" (#2515)
1 parent 2b96d96 commit 2647b0b

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/guide/extras/rendering-mechanism.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,23 +68,23 @@ React の仮想 DOM 実装や他のほとんどの仮想 DOM 実装は完全に
6868

6969
以下では、Vue テンプレートコンパイラーが仮想 DOM の実行時パフォーマンスを向上させるために行った、主要な最適化についていくつか解説します。
7070

71-
### 静的ホイスティング {#static-hoisting}
71+
### 静的な部分のキャッシュ {#cache-static}
7272

7373
テンプレートには、動的バインディングを含まない部分がよくあります:
7474

7575
```vue-html{2-3}
7676
<div>
77-
<div>foo</div> <!-- hoisted -->
78-
<div>bar</div> <!-- hoisted -->
77+
<div>foo</div> <!-- cached -->
78+
<div>bar</div> <!-- cached -->
7979
<div>{{ dynamic }}</div>
8080
</div>
8181
```
8282

83-
[テンプレートエクスプローラーで観察する](https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PlxuICA8ZGl2PmZvbzwvZGl2PiA8IS0tIGhvaXN0ZWQgLS0+XG4gIDxkaXY+YmFyPC9kaXY+IDwhLS0gaG9pc3RlZCAtLT5cbiAgPGRpdj57eyBkeW5hbWljIH19PC9kaXY+XG48L2Rpdj5cbiIsIm9wdGlvbnMiOnsiaG9pc3RTdGF0aWMiOnRydWV9fQ==)
83+
[テンプレートエクスプローラーで観察する](https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PlxuICA8ZGl2PmZvbzwvZGl2PiA8IS0tIGNhY2hlZCAtLT5cbiAgPGRpdj5iYXI8L2Rpdj4gPCEtLSBjYWNoZWQgLS0+XG4gIDxkaXY+e3sgZHluYW1pYyB9fTwvZGl2PlxuPC9kaXY+XG4iLCJvcHRpb25zIjp7ImhvaXN0U3RhdGljIjp0cnVlfX0=)
8484

85-
`foo``bar` の div たちは静的なので、再レンダリングのたびに vnode を再作成して差分を取ることは不要です。Vue コンパイラーは、vnode の作成呼び出しをレンダー関数から自動的に巻き上げ(ホイスティング)、レンダリングのたびに同じ vnode を再利用します。また、レンダラーは、古い vnode と新しい vnode が同じものであることに気づいたときに、それらの差分比較を完全にスキップすることができます
85+
`foo``bar` の div は静的なので、再レンダリングのたびに vnode を再作成して差分を取ることは不要です。レンダラーは、最初のレンダリング時にこれらの vnode を作成し、キャッシュして、その後の再レンダリングのたびに同じ vnode を再利用します。レンダラーは古い vnode と新しい vnode が同じものであることに認識した場合、それらの差分比較を完全にスキップすることもできます
8686

87-
加えて、連続する静的要素が十分にある場合、これらのノードのプレーンな HTML 文字列を含む単一の "静的 vnode" に凝縮されます([](https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PlxuICA8ZGl2IGNsYXNzPVwiZm9vXCI+Zm9vPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJmb29cIj5mb288L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImZvb1wiPmZvbzwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiZm9vXCI+Zm9vPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJmb29cIj5mb288L2Rpdj5cbiAgPGRpdj57eyBkeW5hbWljIH19PC9kaXY+XG48L2Rpdj4iLCJzc3IiOmZhbHNlLCJvcHRpb25zIjp7ImhvaXN0U3RhdGljIjp0cnVlfX0=))。これらの静的 vnode は、`innerHTML` を直接設定してマウントされます。また、初期マウント時に対応する DOM ノードをキャッシュします。アプリケーション内の他の場所で同じコンテンツが再利用される場合、ネイティブの `cloneNode()` を使用して新しい DOM ノードが作成されるため、非常に効率的です。
87+
加えて、連続する静的要素が十分にある場合、これらのノードのプレーンな HTML 文字列を含む単一の "静的 vnode" に凝縮されます([](https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PlxuICA8ZGl2IGNsYXNzPVwiZm9vXCI+Zm9vPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJmb29cIj5mb288L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImZvb1wiPmZvbzwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiZm9vXCI+Zm9vPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJmb29cIj5mb288L2Rpdj5cbiAgPGRpdj57eyBkeW5hbWljIH19PC9kaXY+XG48L2Rpdj4iLCJzc3IiOmZhbHNlLCJvcHRpb25zIjp7ImhvaXN0U3RhdGljIjp0cnVlfX0=))。これらの静的 vnode は、`innerHTML` を直接設定してマウントされます。
8888

8989
### パッチフラグ {#patch-flags}
9090

0 commit comments

Comments
 (0)