仮想DOMってなに?
vue.jsを勉強していてわからないことだらけなので、メモとして調べたことを書いておこうと思います。
仮想DOMとは?
バインディングしたデータをもとに作られれます。
仮想 DOM は、インメモリに保持された「仮想の」UI 表現が、ライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。
リアルDOMのNodeと同じように「仮想Node(VNode)」と呼ばれる節で構成されたツリー構造になっています。
仮想DOMから実DOMが生成され、その内容が実DOMツリーとなって生成されています。
リアルDOMを操作するのではなく、オブジェクトを変更し差分があるところだけ更新するので一般的に速くなると言われています。
DOMツリーとノード
DOMって?
Document Object Model (DOM) は、— ウェブページを表す HTML のように — 文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。
つまりJavaScriptからHTMLドキュメントを操作するためのインターフェース、およびデータ構造のことです。JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMのAPIを使うことで操作できます。
DOMはHTMLドキュメントを「オブジェクトのツリー」として扱っています。これを「DOMツリー」と呼びます。
Nodeって?
ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。
さきほどのDOMツリーのひとつひとつの箱(オブジェクト)がNodeです。
参考文献: 基礎から学ぶvue.js mio著
参考サイト:
https://kuroeveryday.blogspot.com/2018/11/difference-between-dom-and-node-and-element.html