Skip to content

docs(glossary): update "hoisting" and "cache static" #2546

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 1 commit into from
Apr 2, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/glossary/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,16 @@ Vue はカスタムディレクティブの作成もサポートしています

JavaScript は、`var`、`import`、関数宣言など、いくつかの構成要素でホイスティングを使用します。

Vue の文脈的には、テンプレートコンパイラーがパフォーマンスを向上させるために静的ホイスティングを適用します。テンプレートをレンダー関数に変換する際、静的コンテンツに対応する VNode を一度作成し、その後再利用できます。このような静的な VNode は、レンダー関数が実行される前に、レンダー関数の外で作成されるため、巻き上げられていると表現されます。テンプレートコンパイラーが生成する静的なオブジェクトや配列にも、同じような形でホイスティングが適用されます。
Vue のコンテキストでは、コンパイラーはパフォーマンスを向上させるために「ホスティング」を適用します。コンポーネントをコンパイルすると、静的な値はコンポーネントのスコープ外に移動されます。これらの静的な値は、コンポーネントの外部で作成されるため、「hoisted(巻き上げ)」と呼ばれます。

## 静的な部分のキャッシュ {#cache-static}

「キャッシュ」という用語は、パフォーマンスを向上させるために頻繁にアクセスされるデータを一時的に保存することを表すために使用されます。

Vue テンプレートコンパイラーは、これらの静的 VNode を識別し、最初のレンダリング中にキャッシュし、その後の再レンダリングごとに同じ VNode を再利用します。

詳しくはこちらをご覧ください:
- [ガイド - レンダリングの仕組み - 静的ホイスティング](/guide/extras/rendering-mechanism.html#static-hoisting)
- [ガイド - レンダリングの仕組み - 静的な部分のキャッシュ](/guide/extras/rendering-mechanism.html#cache-static)

## DOM 内テンプレート(in-DOM template) {#in-dom-template}

Expand Down