仮想DOMってなに?

vue.jsを勉強していてわからないことだらけなので、メモとして調べたことを書いておこうと思います。

 

仮想DOMとは?

 

バインディングしたデータをもとに作られれます。

仮想 DOM は、インメモリに保持された「仮想の」UI 表現が、ライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。

リアルDOMNodeと同じように「仮想Node(VNode)」と呼ばれる節で構成されたツリー構造になっています。

仮想DOMから実DOMが生成され、その内容が実DOMツリーとなって生成されています。

リアルDOMを操作するのではなく、オブジェクトを変更し差分があるところだけ更新するので一般的に速くなると言われています。

 

f:id:annzuwatanuki:20191004152131j:plain

汚い絵でごめんなさい

 

DOMツリーとノード

DOMって?

Document Object Model (DOM) は、ウェブページを表す HTML のように文書の構造をメモリ内に表現することで、ウェブページとスクリプトプログラミング言語を接続するものです。

つまりJavaScriptからHTMLドキュメントを操作するためのインターフェース、およびデータ構造のことです。JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMAPIを使うことで操作できます。

 

DOMHTMLドキュメントを「オブジェクトのツリー」として扱っています。これを「DOMツリー」と呼びます。

 

Nodeって?

ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。

さきほどのDOMツリーのひとつひとつの箱(オブジェクト)がNodeです。

 

参考文献: 基礎から学ぶvue.js  mio著

参考サイト:

https://kuroeveryday.blogspot.com/2018/11/difference-between-dom-and-node-and-element.html