vueの原理と実現プロセスを理解する

jqueryの操作domからvue,reactなどのフレームワークのvdom実現はdomの操作を大幅に低減し,性能を向上させる.先端の刀耕火種は、現在のモジュール化、先端の内容が日々変化し、日々進歩しています.フロントエンドの発展では、jqueryと現在のフレームワークを比較して、これらの年のフロントエンドが得た進歩を発見することはできません.
jqueryとフレームワークの違い:
jqueryの本質はやはりdomを操作することであり、domを処理する際にも、データとビューレイヤが分離されず、データにdomの操作がある.これはjqueryが淘汰した理由の一つであり、彼は基本的な開閉原則(修正閉鎖、拡張開放)に合わないからだ.
今よく知られているフレームワークは、この問題をうまく処理しています.データとビューの分離を実現し,ビューレイヤとデータ層をデカップリングし,中間層を介して制御の目的を達成し,データでビューを駆動し,データの変化だけに関心を持ち,DOMの動作をカプセル化した.
MVVMの理解:
MVVMといえば先輩MVC(Model+View+Controller)
MVC:プロトタイプ+ビュー+コントローラ.ユーザーはビューを操作します.さらにコントローラはプロトタイプを変更し,さらにビュー表示を変更する.また,ユーザはコントローラを直接操作してプロトタイプを変更し,さらにビューレイヤの表示を変更する.jquerはこの設計に基づいています
MVCに基づいて、フロントエンドの革新的なMVVMのVM(View Model)は、View層とModel層の中間にあるVM層である.彼は橋の役割を果たしている.
ビューレイヤは、イベントによってモデルレイヤ(データレイヤ)をバインドし、データレイヤはデータバインドによってビューレイヤを変更します.VMは接続の役割を果たしています.コントローラで操作することなく、データの変化だけに関心を持つことができます.
MVVMフレームワークの3つの要素:応答式、テンプレートエンジン、レンダリング
応答式:vueはdataの変化をどのように傍受しますか?
テンプレートエンジン:vueのテンプレートがどのように解析され、命令がどのように変化するか
レンダリング:vueのテンプレートはhtmlにどのようにレンダリングされますか?レンダリングパス
応答:
ここでの応答式はデータの応答式であり,データの変化はリアルタイムで傍受される.vueがdataデータのリアルタイム傍受を実現する核心関数はObjectである.defineProperty
これはes 5におけるオブジェクト上の方法であり、オブジェクト属性getとsetのリスニングを実現することができる.

//          ,      
var vm = {};
var obj = {
  name: "xb",
  age: 18,
  // like
};
var key;
for (key in obj) {
  (function(key) {
    Object.defineProperty(vm, key, {
      get: function() {
        console.log("get", obj[key]); //  
        return obj[key];
      },
      set: function(newVal) {
        console.log("set", newVal); //  
        obj[key] = newVal
      }
    });
  })(key);
}

ここでは、dataのデータがどのようにVueインスタンスにマウントされているのか、実はこの方法であるという問題も提起することができます.Vue 3.0バージョン以降,データの傍受を実現するために新しい手法に置き換え,es 6の構文を用いた(ここでは拡張しない).
テンプレートエンジン:
テンプレートは何ですか:vueでは文字列で、彼は論理を持っていて、JS変数も埋め込まれています.本質は文字列です.論理的に対応するのはv-if,v-forなどである.彼はhtmlと似ていますが、違いが大きく、htmlは静的で、htmlには論理がなく、JS変数がありません.ブラウザで指定したルールに従ってレンダリングできますが、vueテンプレートはできません.彼はまず解析しなければならない.htmlに変換すると、ページがレンダリングされます.
ここで述べた解析は,JSを借りる必要があることを知っているはずである.JSはフロントエンドにおける図霊が完備した言語であるからである.(https://blog.csdn.net/robinsone/article/details/39004057)
したがって、テンプレートは最も重要なJS関数に変換され、JSからhtmlに変換される(ここではrender関数(レンダリング関数を指す)
render関数の実行が完了するとvnode(仮想ノード)が返されます.
ここでは、前述のvdom(仮想dom)について説明します.
vdom:
質問するvdomは何なのか、なぜ存在するのか.vdomはどのように適用され、コアAPIは何ですか.
vdomとなぜ存在するのか:
JSでdom構造をシミュレートし,dom変化のコントラストをJS層に置くことで,再描画性能の向上が原因となる.
なぜdom操作が「高価」なのか、再び質問します.
dom要素を作成します.このdom要素を巡ると、dom要素には多くの属性があることがわかります.
最も主要な原因は、domを操作するたびにcpuとgpuが呼び出されることです.ページの再配置はcpuの計算能力を占有し,ページの再描画はgupの画像処理能力を占有する.
ここではgpuの分類についてもお話しします.家庭用と専門的に分かれています.家庭用グラフィックスカードはゲームグラフィックスとも呼ばれます.ゲームグラフィックスはマップやシャドウなどを作るのが得意です.プロフェッショナルグラフィックスは、グラフィックスが得意で、プロフェッショナルグラフィックスの性能は家庭用グラフィックスより数十倍も優れています.
私たちはページの再配置のたびに図面に相当しますが、ほとんどのグラフィックスカードは家庭用グラフィックスカードなので、図面を描く上で性能が悪いです.
だから問題の本質を追求して、ハードウェアの問題で、domを操作するのがそんなに“高価”に見えます.
操作domがなぜ「高価」なのかがわかり,vdomがなぜ存在するのかが分かった.
vdomの応用:
紹介しているのはsnabdom
コアAPI:h関数とpatch関数
h関数:domノードを定義するvnode(シミュレーションdomノード)
patch関数:2つのパラメータを受信します.初期のcantainerとvnode
patch(container,vnode)//はじめてのpatch(vnode,newVnode)//再レンダリング
patch関数は対比関数であり,ここではdiffアルゴリズムに関する.(新しいものではありません.gitコマンドにはとっくにありますが、2つのテキストの違いを比較します)
vdomはなぜdiffアルゴリズムを使用するのか:
domの操作は「高価」であり,アルゴリズムの目的は今回domが更新しなければならないノードを見つけて更新し,他のノードは更新しない.このプロセスをdiffアルゴリズムと呼ぶ.
render関数:
テンプレートのすべての情報はrender関数に含まれます
関数の実行が完了したらvnode(シミュレーションノード)を返します.
vue全体の流れ:四部作
テンプレートをrender関数に解析

はwith構文を内蔵し、コードを簡潔にする

テンプレート内のすべての情報はrender関数によって

を含む.

テンプレートで使用されるdataの属性は、すべてJS変数

になります.

テンプレートのv-model,v-ifなどはすべてJSロジック

になりました

render関数はvnode

を返します.
レスポンスリスニング開始

Object.definePropertyコア関数によるリスニング

data属性をVueインスタンスにエージェントする(withの使い方と大きく関係する)

最初のレンダリング、ページの表示、依存関係のバインド

初回レンダリング、updataComponent、vmを実行する.render(vmはVueインスタンス)

render関数を実行するとvmにアクセスする.listとvm.title

updataComponentを実行すると、vdomのpacthメソッド

に進みます.

pacthはvnodeをDOMにレンダリングし、初回レンダリングは

を完了する.

は、

に応答getメソッドによって傍受される

なぜgetを傍受するのか、setを直接傍受するのはだめですか?

dataには多くの属性があり、使用されるものもあれば、使用されないものもあり、使用されるとgetが移動し、使用されないものもあります.getのプロパティを歩かないで、setも関心を持つ必要はありません.そうすれば、

の繰り返しレンダリングを避けることができます.
dataプロパティが変化し、rerender関数(二次レンダリング)がトリガーされます.

属性が変更され、setによって

に傍受される

setでupdataComponent(非同期メソッド)

を実行

updataComponent再実行vm.render()

で生成するvnodeとprevVnodeをpatchで比較する

.

htmlで

をレンダリング