知識ポイントのVUE一部

1. VUEプログレッシブ

 

  階層的なフレームワーク:ビュー層=「コンポーネントのメカニズム=」ルーティングメカニズム=「管理ステータス=」ビルドツール

  これは、開発ニーズを視野層の最も心レンダリングすることができ、他のモジュールは、需要に応じて追加することができます。

 

2.変更の検出

 

  レンダリング:ステータス=「DOM =」ユーザーインターフェイス

  データドライバは、ビューの更新を変更したときVUE応答システムは、重いフレームのレンダリング主として検出の変化、すなわち変化検出データに、能力を付与します

 

3.オブジェクト検出の変更

  ときにトリガセッター変更時刻、ゲッターは、データを読み出すトリガ変更を追跡するObject.definePropertyフォームゲッター/セッターにプロパティを変換するステップと、使用に依存するデータを収集するにゲッター、トリガセッター、ゲッター通知

  変更された収集されたデータに依存して、コレクションが発、発に格納さによって異なり依存するメッセージを送信する/収集依存/依存を除去するために使用される、依存性、すなわちウォッチャーは、唯一のゲッターウォッチャーをトリガ収集ウォッチャートリガーに依存します

  ウォッチャー発を入れゲッターは、中に収集し、データの変更は、循環リストを依存したときに、Watcherは再びすべてを通知します。

  

  ウォッチャー:最初のそのようなwindow.targetとして指定された場所にグローバルにユニークな独自に設定して、データを読み、トリガーゲッター、ゲッターのその位置でグローバルにユニークなウォッチャーから現在の正規のデータ読み出し、およびこのコレクションのウォッチャーを読みますへ

  DEPが、このようにアクティブなサブスクリプションデータを変更します。

 

  PS:フロントは、すべてのプロパティを検出するために、特定の属性データを検出します、クラスがオブザーバーをカプセル化することができます

 

  オブザーバーカテゴリ:ゲッター/セッターで応答オブジェクトにすべてのデータを変換するには、データオブジェクト内のすべての変更を検出し、データオブザーバーフォームゲッター/セッター変更を追跡することにより、変換、外の世界のウォッチャーで読み取り

  ウォッチャーは、通知を受信した後、通知が外部に送信され、外部への変更通知、データ、依存性ウォッチャーを追加それによってゲッターをトリガし、ときに、データの変更は、セッターを誘発し、したがって発依存性に通知を送信します接触

  髪のビューが更新され、また、コールバックをトリガすること;

 

3.アレイ変化検出

  インターセプターは、次にプッシュ方式、インターセプターとして、アレイプロトタイプの各使用後、Array.prototypeをインターセプタで被覆する方法を提供行われる操作の配列方法であって、配列の変更インターセプターを追跡することによって中古

  アレイを動作させる方法のネイティブ配列のプロトタイプ。

 

  インターセプター:同じオブジェクトをArray.prototypeを

  プッシュ/ポップ/シフト/アンシフト/スプライス/ソート/リバース:配列のプロトタイプ配列は、その内容の方法を変更することができます

 

  PSは:;依存アレイゲッターに集め、タッチインターセプタで発を回収したゲッターの使用に依存してdefineReactiveオブジェクト、各キーは、対応する(DEP依存格納された収集ゲッターに依存する)に依存するのDEP店舗のリストを有します

  保存されたオブザーバーのインスタンスに依存し、依存して作られました。

 

4.仮想DOM

  宣言DOM操作:Vue.jsは/角度/反応する状態に関連付けられているときに状態変化更新のみDOMノード、状態およびDOM、レンダリングされたビュー状態との間のマッピングを記述することにより、そのような隠された角度の使用など

  機構をチェックすることは、仮想DOMを反応させ、Vue1.0用いきめ細かい結合(各結合ウォッチャーは、大きなオーバヘッドに状態変化、オーバーヘッドメモリと信頼を観察に対応する状態が複数のノードに使用されている場合は特に) 、vue2.0鉱業

  媒体速度ソリューションで再生するとき、仮想DOM(成分レベルがあっても、一定の状態を使用して、複数のノード内のコンポーネントウォッチャーの一例であり、唯一のウォッチャーは、この状態の変化を観察し、状態変化を導入し、唯一の通知

  仮想DOM)内部コンポーネントのレンダリングに比べて、部品に関する。

 

  仮想DOM溶液:レンダリングする前に、仮想レンダリングを使用して、状態ツリーを介してツリーノードを仮想ノードを生成し、ツリーノードツリー上の現在の仮想ノードが仮想コントラストを生成し、異なる部分のみレンダリング、仮想ノードのレンダリング

  表示するには

 

  vノードツリー仮想ノードを設定された仮想コンポーネントツリーノードツリー。

 

  モジュール:モジュールの機能をレンダリングからコンパイルされた状態とDOMの間の説明のマッピング関係、得られた仮想DOMノードツリーを実行するレンダリング機能、vノードのパッチからのビューをレンダリングします。

 

  仮想DOM物事のvue.jsで行う:仮想ノードvノードを対応する実DOM DOMノードを提供し、新しい仮想ノード対古い、ビューを更新(古いものと新しい仮想ノードを比較し、仮想DOMコアアルゴリズムパッチである、あなたは起こるノードを決定することができます

  変更、ノードのみ)ビューの変更を更新します。

  

  PS:、動作する必要が実際のDOMを回避するために仮想ノードを使用して、パフォーマンス・オーバーヘッドを節約し、ウォッチャーサイズが依存コンポーネントレベル及び数ウォッチャーの数を減らすように調整することができます。

  

5. VNODE

  Vue.jsプレゼンスVNODEクラス、クラスは、異なる種類のvnodeの例によってインスタンス化することができ、vノードそれぞれの異なるタイプの例は、DOM要素の種類を表し、DOM要素は、要素ノード/ノードテキスト/コメントノードを有する、対応するvノード例をも

  同様のノード、vノードは、本質的に、クラスvノードからインスタンスjsオブジェクトです。

 

  vノード:

    ノードは、オブジェクトを記述し、実際のDOMノードを作成する方法を説明しなければなりません。

    vノードとビュー対応し、JS DOMオブジェクトのバージョン。

    タイプ:コメントノード/テキストノード/ノード要素/ノード・アセンブリ/機能性成分/クローンノード(ノードスロットと最適化された静的ノード)

  vノード本当のDOMを作成し、ビューにレンダリングします:

    最初のレンダリングは=「本当のDOM要素を生成するvノードを使用して、vノードを作成し、ページのレンダリングビューに挿入されています。

    =「キャッシュされたvnode、実際のDOMを変更するためにローカルの変更に基づいて新たに作成されたとの比較vノードのキャッシュのためのvノード上でレンダリングされる再レンダリング。

    PS:コンポーネントレベルに中型、通知に偵察ポリシー、レンダリングされたビューを仮想DOMを使用して内部部品ときの状態が変化し、状態アセンブリの変化は、アセンブリ全体を再描画する必要がある場合。

 

6.パッチ

   アルゴリズムパッチ:vノードレンダリングDOM取引; vノードは、古いものと新しいものとの間の異なる比較、ノードを識別するように更新されることの結果を比較することによって、更新する必要がある、すなわち、既存のDOMへの修正は、ビューを更新する目的を達成するために、DOM低減動作、リフト

          パフォーマンス;(DOMのJSが速い速度よりも遅く行わ;置換は、操作コストDOM JS計算コストを使用して実行されます。)

  目的:(レンダリングされたビューの目的を達成するために古いものと新しいDOM vノード比較の間の既存の違いを修正することによって行われる)ビューをレンダリング、DOMノードを変更します。

  

  DOM 3つのことを変更します。新しいノードを作成し、廃止されたノードを削除、修正するノードを更新する必要がある。(それがどのビューvノードをレンダリングすることになるとするときのvnodeとoldVnode同じではありません)

   ノードを作成します。

    oldVnodeが存在しませんが、vノードがある場合は、直接要素およびレンダリングビューを作成するvnode。

    同じノードが実際のvノードDOM要素を生成するために必要であり、これは、ビューに挿入されたときvノードが完全oldVnodeない場合。

    PS :(のDOMのvnodeの異なる1つのノードが古いノードの隣に挿入し、新しく作成されたノードのDOMに対応oldVnode古いノードを置き換える新しいノードを作成し、vノードのタイプに応じて、対応するタイプを作成する()古いノードを削除する必要がありますの

    DOM要素、ビューにその要素)

    ノードの唯一の3つのタイプがDOMに作成され、挿入されます:要素ノード(タグ属性付き)---コメントノード(isCommentプロパティ)---テキストノード

    要素ノード:現在の環境でcreateElementメソッドを呼び出すと、このようなのdocument.createElementブラウザ環境として、真の要素ノードを作成するために、要素は、現在の環境内のビューコールappendChildメソッドをレンダリングされ、それは要素であってもよいです

    なブラウザparentNode.appendChildとして割り当てられた親要素の中に(PS:子要素ノードもアウトに対応する作成する必要があります - 再帰を、その下)

    テキストノード:document.createTextNodeとしてはcreateTextNode、

    コメントノード:CREATECOMMENT、このような方法document.createComment

    

  oldVnodeが存在する間vノードが、存在しない場合、DOMから削除;がremoveNode removeVnodes:ノードを削除

  ノードを更新します。oldVnodeとvノードが同じノードである場合には、なく、同じ場所を見つけるために古いものと新しいノードを比較することで更新されます。

    第1、ノードが静的であるか否かを判断するだけレンダリングフォローアップ静的ノードが更新されず、スキップされます。

    2.非静的ノードは、テキスト属性かどうかを決定する:ある21テキスト直接ブラウザnode.textContentのように、代わりに仮想ノードのテキストプロパティのコンテンツのDOMノードの内容を表示するsetTextContentメソッドを呼び出し属性;.

    (仮想ノードの用心テキスト属性と古い仮想ノードが直接コンテンツビューに実際のDOMと同じではありませんとテキスト属性新しい仮想ノードのテキストに変更されています)  

    221人の子供が2例に分かれてあります:古い仮想ノードの古い仮想ノードが子を持つ場合は、子供:.は2211がある場合22.新しい仮想ノードはそれが要素ノードで、その後、子ノードがあるかどうかに、何のテキスト属性を持っていません

    さらに詳細な比較の更新は、更新または子供が移動したり、子ノードを追加することも削除; 2212古い仮想ノードに子がない場合は、古い仮想ノードは、空のテキストラベルまたはテキストノードであるテキストセクションの場合

    222人の子供新しいノードがNULLノードでない場合は、直接、ポイントは、テキストラベルが空になるクリアするために、その後、子ノードと実際のDOM要素として作成された仮想ノード順次次のDOMノードビューに挿入します

    旧ノードが目的空のタグを達成するための穿刺を削除します。

     2211個の更新子ノード:更新ノード - 新しいノード - ノードを削除 - ノードの位置を移動します

    2つのつの子ノードリストの比較、あなたのノードの新たなリストは、新しい、古いノードに各ノードの循環を示す、無ノード昔であれば、古いものと同じノードの現在のノードを見つけるために行ってきましたループの最初の必要があることを現在のサブノードそれはあります

    新しい状態ノードの変化による、ノードが作成されると、あなたは更新操作を見つけた場合、古いノードと新しいノード発見位置が異なる場合は、必要にノードを移動するために、運用ビューに挿入;サイクルが終わった場合には、

    また、ノードは、ノードを削除するノードであり、残りの古いノード。

   

7.テンプレートのコンパイル

  目的:レンダリング機能を生成します。

  機能の効果をレンダリング:各実行は、それが現在の最新の状態を使用すると、(vノード理由を生成することができます - コードの文字列関数の呼び出しが多い)新しいvnodeのを生成し、レンダリングを継続し、このvノードを使用します。

  テンプレート=「テンプレートコンパイラ(リゾルバ - オプティマイザ - コードジェネレータ)=」機能をレンダリング   

  ASTに分解1.テンプレート、静的なノードを横断ASTマーカ2; 3.AST生成レンダリング機能 

  パーサ:ASTに解析テンプレート、フィルタパーサ(分析フィルタ)------テキストパーサ - (変数テキストで解決、解決するための変数ニーズにプレーンテキスト)HTML ----- HTMLに解決するたびにテンプレートを解析するパーサ(、

  ラベルは、位置/終了位置を開始/またはトリガフックASTノードは、対応する原料を生成するたびに、テキスト注釈は、(メインラインを介して)それにパラメータ情報を渡し、HTMLパーサモニタをフック関数をトリガする場合

  ASTに先立ち、これらのパーサーが一緒に組み立てられている)ASTの異なる種類を使用するためのさまざまな方法に基づいて生成されます。htnlパーサは、AST上のすべてのテンプレートは良い生成の解析が終了したら、

  オプティマイザ:ASTをトラバースし、マークを検出し、すべての静的サブツリーを再レンダリングする必要はありませんが、パフォーマンスを向上させるために無駄な努力を避けます。

  コード生成:ASTの機能、すなわち、符号列をレンダリングするコンテンツに変換します。

  使用外の場合は、最終的な符号列のエクスポート機能をレンダリングしている関数にコードの文字列になります。機能のレンダリング時にタスクを完了するために、テンプレートのコンパイルの外にエクスポートします。

 

8.パーサ

   テンプレートは、ASTを解決し、ノードを記述するために使用されるJavaScriptオブジェクトでAST、ノードはオブジェクトを表す、オブジェクト属性、ノードに必要な各種データを保存するために使用され;(ノードツリーであるオブジェクトの説明とAST)

  エンドフック関数 - - テキストフック関数 - 役割は、HTMLパーサーHTML、HTML構文解析プロセスは、開始タグフック関数としてのフック関数、様々なトリガし続ける解析するノートフック関数を、

  <div> <P>ヘクタール</ P> </ div>

  パーサは、<P>に解決、フック関数の開始の開始をトリガーする<div>タグを解決するために、前後に解析され、再びスタートをトリガする;母テキストテキストトリガーフック関数の文字を解決するために、</ P>トリガーに解決ラベルエンドフック

  関数の最後、</ div>トリガー終わりに解決、分析終了。

  フック関数は、開始ノードフックに要素タイプの構築、ASTに内蔵されていてもよい、テキストタイプノード文字フックを構築する;工事の種類の注釈ノードフックコメント機能。

  HTMLパーサーフック関数がもはや完全に、すべてのノードタイプのフック関数で構築されてきているが、解析されたすべてのテンプレートの説明をトリガするとき、すなわちASTが構築されなかった; ASTスタックと階層関係のエンドノードが、記録ノードスタックを開始するために、スタック;

  HTMLテンプレートは、サイクルの終わり空の文字列構文解析に切断されるまで、そのテンプレートHTML解析処理サイクルは、すなわち、テンプレートHTML文字列のループと、各サイクルはフィールド列HTMLテンプレートから取得され、このプロセスが繰り返されます完成し;

 

9.オプティマイザ

  役割:ASTとマーキングの静的サブツリーを探します。

  静的サブツリー:ASTは変更されません所有しているノードと、目的をマーキング - パフォーマンスを向上させるために、静的なサブツリーの新しいノードを作成するたびに再レンダリングの必要はありません。プロセスの仮想DOMにパッチを適用すると、スキップすることができます;

  AST内のすべての静的ノードを特定し、マークを調理、すべての静的のルートを見つけ、ASTにマークを調理、再帰;

 

10.コード・ジェネレータ

  ASTは、関数、すなわち符号列をレンダリングするコンテンツに変換し、符号列、すなわち関数は、関数のレンダリングされ、機能パッケージで行うことができる;のcreateElementレンダリング機能は、vノードを作成することができる行います。

  生成された符号列は、各ASTノード上から下への再帰プロセス、処理順番です。

  - テキストノード - ノードコメント要素ノード:ノードの種類があります

  良い戦い文字列の文字列の連結は、呼び出し元に戻ります後。

 

11.ライフサイクル

  初期化フェーズ(新しいヴュー()beforeCreateが作成した)----テンプレートコンパイル相(前後に作成され、beforeMountは)----(beforeMountはのBeforeUpdateが更新マウント)のステージをマウント----アンロードフェーズ(beforeDestroyが破壊されました)

  初期化フェーズ:新ヴュー()作成相との間で、---いくつかのプロパティを初期化するには、/イベントデータをオブジェクトと、小道具/メソッド/データ/演算/時計としてvue.js、/注入/提供に応答。

  テンプレートのコンパイル・フェーズ:テンプレートのレンダリング機能をレンダリングするために作成したとbeforeMountフック関数フック関数との間の位相、目的は---、唯一のフルバージョンに存在します。

  。(詩:JSにコンパイル済みのを構築する際に、最終的なパッケージはVに、コンパイラ、ランタイムバージョンを築くために必要とされていないので、VUE-ローダーまたはvueify、*内部VUEファイルテンプレートを使用して、この時間をテンプレートは、レンダリング機能にコンパイルされているので、

     ライフサイクルには、テンプレートのコンパイル段階ではありません。初期化フェーズのステージの次のステージは、ステージに直接取り付けられています)。

  ステージマウント:beforeMountステージ、ステージをマウントするためにフック関数との間に装着され、DOM上にマウントされ、インスタンスをvue.js、プロセスに搭載され、指定されたテンプレートのDOM要素、VUEにレンダリングしようとしています。 jsがオープンウォッチャーになります

   トラック的な変化;取り付けられた段階で、vue.jsは、状態の変化を追跡していきます、データ変更時、ウォッチャーは、仮想DOMの再レンダリングされたビューを通知します、と韓国をレンダリングする前に、ビューはのBeforeUpdateフックをトリガーする、完成したレンダリング

  フック関数は、完了後に更新トリガする。成分が破壊されるまで、この状態が継続します。

  相アンロード:VM $はdestroyメソッドを呼び出すためのアプリケーションを、vue.jsは、すべてのトラックに依存キャンセル、親コンポーネントから自身を削除し、インスタンス上のすべてのイベントリスナーを削除します。

 

12.命令

  特別な特性V-プレフィックス値 - JS単一の式。

  責任:ノック・オン応答アクションのDOMに影響をもたらす式の値が変化し、

  相を解析テンプレートでは、ASTに命令を解析するには、それはASTを使用して、いくつかの組み込みコマンドは、実装のプロセスにコードの文字列を生成し、かつ効果的な日付ように、最終的には仮想DOMのレンダリングプロセスにカスタムコマンドフック関数をトリガーします。

 

フィルター13

  一般的に、結果は、フィルタ関数のフィルタ関数のパラメータである前に、ネストされた関数呼び出しが実行された後 - フィルタにコンパイルされた関数呼び出し、フィルタシリーズコンパイル(スプライシングストリング分析)コンパイル時フィルタ機能

  このようなテキストの書式設定など

 

 

 

 

 

 

 

 

 

  リファレンス&ありがとう:素人Vue.js

  

 

おすすめ

転載: www.cnblogs.com/haimengqingyuan/p/11494722.html