次に参画させて頂ける案件でフロント側でVue.jsを使用するので、現在勉強中です。
学習の前提として仮想DOMの仕組みについてメモ書きです。
#DOMとは
Document Object Model。
わかりやすく、オブジェクトではないがオブジェクトのような感じで、HTMLにアクセスすることが出来る形データの事。
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction
#仮想DOMとは
DOMをコピーしたjavascriptのオブジェクトの事。
#前提
・DOMに直接アクセスして処理を加えるというのは非常に遅い
・documentはコード上にあるのではなくブラウザにあり、そこにアクセスするのに時間がかかってしまう（DOMはブラウザ上にある）。
・なら、自分でjsでdocumentと全く同じオブジェクトを作ればアクセス時間が短くなる。
#仮想DOMの差分検出アルゴリズム
…「描画処理前」の仮想Nodeツリーから更新対象となる仮想Nodeを抽出する。
順番としては
１：仮想DOMツリーを作成する
２：変更前後の仮想DOMの差分を比較
３：仮想DOMからリアルDOMに反映する
４：差分を検知する
５：検知した差分でリアルDOMをブラウザがレンダリング
の流れで反映する。
#覚えておくポイント
・スピードが速くなるわけではない、不要なDOM操作が発生せず、ブラウザレンダリングの量が少なくなる為、「遅く」なりづらくなる。
・仮想DOMを採用している技術によってレンダリングのトリガーの仕組みを正確に理解していないと、期待した描画がされない可能性がある。