English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 位置
  2. ホームページ
  3. 経験記録
  4. 本文

Vueの$mountの解釈

この記事は、$mountの分析を通じて皆さんに説明することを目指しています。

$mountが行う作業は、大まかに次の通りです：3ステップ：

1.オプションにrender関数が含まれていない場合、compileToFunctionsを通じてHTMLテンプレートをVNodeを生成するためのRender関数にコンパイルします。

2.Watcherインスタンスをnewし、updateComponentメソッドをトリガーします。

3vnodeを生成し、patchを通じてvnodeをDOMに更新します。ここでは、スペースの制限により、最初の二つのステップについて説明し、第三のステップは次回に説明します。以下に具体的に説明します。まず、$mount関数に到達します。以下の図を参照してください：

　

まず、オプションにrender関数があるかどうかを確認し、ない場合はtemplateがあるかどうかを確認します。ない場合は、DOM要素のouterHTMLを使用します。templateを取得したら、以下の図を参照してください。

　　

compileToFunctionsを呼び出してtemplateをrender関数に変換するプロセスが見られます。ここには二つのプロセスがあります：

  • templateをast（抽象構文木）に解析する
  • ast（抽象構文木）语法樹を生成するために

具体的にはtemplateをast（抽象構文木）に解析する部分については、ここでは説明しません。機会があれば、別の章で詳しく分析します。さて、render関数を手に入れたので、次に何をしますか？もちろん、mountComponentを開始します。以下の図を参照してください：

　　

上の図から見て取れるように、プログラムはupdateComponentメソッドを宣言しています。これはウォッチャーインスタンスが呼び出す予定のコンポーネントの更新メソッドです。その後のウォッチャーの分析で詳しく見ていきます。なぜupdateComponentメソッドが条件に応じて宣言されるのかは、パフォーマンスからもわかります。その方法の一つはrenderとupdateのパフォーマンスをテストするためです。ようやくウォッチャーに到達しました。まず、このコードを見てみましょう：

// ウォッチャーのコンストラクタ内でこの値をvm._watcherに設定しています
// ウォッチャーの初期パッチが$forceUpdateを呼び出す可能性があるため（例えば、子要素内で）
// component's mounted hook)、それがvm._watcherが既に定義されていることに依存しています
new Watcher(vm, updateComponent, noop, null, true) /* isRenderWatcher */);

まず、コメントに書かれている_watcherが何かを分析しましょう。実際にはforceupdateのコードを見ればわかります：

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

これはvmの_watcherのupdateメソッドを呼び出すことです。強制的な更新を行うために使われます。なぜ強制的な更新と呼ぶのか？Vueでは、新しい値が古い値と同じ場合、watcherの更新ビューをトリガーしない判断があります。したがって、更新を強制的にするにはforceupdateを呼び出す必要があります。それでは、渡されたパラメータを見てみましょう：

  • vm:現在のvmインスタンス
  • updateComponentこれは非常に重要で、後でvnodeをDOMに更新するために使われます。
  • noop無意味な関数
  • null optionオプション、存在しない場合null
  • trueは、どのwatcherが使われているかを判別するために使われています。computed計算属性や、options内でwatchを設定した場合も、new Watcherが使われますが、これによりこれらを区別します。それでは、new Watcherが何を行っているかを見てみましょう、以下の図に示されています。

　

まず、コードにこの判定があります

if (isRenderWatcher) {
 vm._watcher = this;
}

このwatcherの上下文がビューのレンダリングに使われている場合、つまり mountComponent で new Watcher が呼ばれたときにのみ、thisが_watcherに割り当てられます。それからwatcherを_watcherにプッシュし、コンポーネントが破棄されたときにwatcherも一緒に破棄されるようにするのが目的です。次に、watcherのメンバーを初期化するコードは以下の通りです：

this.deep = this.user = this.lazy = this.sync = false;<br />

次に、getterに値を設定することです、this.getter = expOrFnです。先ほど渡されたupdateComponent関数を覚えていますか、もちろんです、これがgetterに値を設定しています。それからここに到達します：

this.value = this.lazy
 ? undefined
 : this.get();

getメソッドに入ってみましょう。どのような処理が行われているかを見てみましょう。getコードは以下の通りです：

　

まずpushTarget(this)を実行することを目にします。pushTarget(this)のコードは以下の通りです：

function pushTarget (_target) {
 if (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

もしある Dep.target がある場合、targetをtargetStackに格納します。ない場合、現在のtargetに設定します。つまり、このwatcherです。次に、getter属性を実行します。それは先ほどupdateComponent関数に渡されたものです。そして、updateComponentは冒頭で言った第三段です。

まとめ

以上が、編集者が皆さんに紹介したvueの$mountについてです。皆さんに役立つことを願っています。何かご不明な点があれば、コメントを残してください。編集者は迅速に回答します。また、呐喊教程サイトに対する皆さんのサポートに感謝します。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を有しておらず、人工的な編集は行われていません。著作権侵害を疑う内容があれば、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは即座に侵害を疑われる内容を削除します。）

基本チュートリアル
おすすめ