仮想DOM && diffのアルゴリズム(王)

1.その仮想DOMとは何ですか?

  • VDOMは言及は、実際のノード構造DOMをシミュレートするために、オブジェクトのオブジェクトモデルであります

2.仮想DOMの基本的な流れ

  1. データ取得(アヤックスフェッチ)

  2. 作成VDOM

    • VDOM起源?
      しかし、私たちのページは一般的に非常に複雑な構造です、我々は構造をシミュレートするために、VDOMのDOMを使用してVDOMオブジェクトモデル見つかっ
      //大きすぎるが、長すぎるので、我々は、我々はまた、JSのDOMで書くことができればと思いましたそれは良いラベル構造ですので、ジャバスクリプトの組み合わせは// + xmlのは、VDOMをシミュレートするためにJSXで、新しい構文糖JSXを思い付きます
    	 <!-- vdom对象模型 -->
        var vdom = {
                    tag: 'div',
                    attr: {
                        className: 'box'
                    },
                    content: [{
                        tag: 'ul',
                        content: [{
                                tag: 'li',
                                content: data.name
                                }]
                        }]
                }
    
  3. 描画関数に変換することにより分析JSX(ジャバスクリプト+ XML)、VDOM構造

  4. VDOMは、実際のDOM //レンダリング機能をレンダリング

  5. データが変更され

  6. 二回VDOMより差分アルゴリズムを使用して、パッチオブジェクトを生成

  7. キーによると、ページの構造、および他の場所を変更するには(再レンダリング機能を使用して)オブジェクトをレンダリングするパッチは(慣性の原則の仮想DOM)の変更なしで変更されていません

何3.差分アルゴリズム?

  • 差分アルゴリズムは、2つのファイル間の比較であり、2つのファイル(パッチ)で異なるオブジェクトのパッチを生成します。ソースのdiffアルゴリズムのバックエンド
    の仮想DOMに適用されるのdiffアルゴリズムへのフロントエンド

4.差分アルゴリズムの終わりには、どのようなリターンを実行した後?

patch对象

5.どのように仮想DOMのフロントデフアルゴリズムに適用するには?

  • 仮想DOMをVUEます差分アルゴリズムは、patch.jsファイルを配置された二つのオブジェクト(VDOMオブジェクトモデル)を比較するためのJSを使用しています
  • ページの構造の変化にレンダリングされたキーのオブジェクト、および他の場所に応じてパッチが変更されていない(仮想DOMの不活性原則)の変更なしである
    理由の一つは、VUEまずMVVMフレームワーク、Vueのパフォーマンスです:注VDOM

深化:ヴューのVDOM対異なる何VDOMリアクト?

おすすめ

転載: blog.csdn.net/HelloWord182/article/details/93534975