DOMツリーって何なん？？
ReactやVue.jsではいずれも描画を最適化する仮想DOM(Virtual DOM)を採用しており、非常に高性能である。
DOMとは？
DOMとは、JavaScriptなどのプログラミング言語とWebページを接続するものである。Document Object Modelの略で、HTMLのドキュメントを「オブジェクトのツリー状の集合」として取り扱う。この仕組みを用いると、JavaScriptでHTML内の要素を操作して、Webページ上に表示される文字色や大きさなどを変更できる。
ブラウザはHTMLをレンダリング(画面描画)するためにDOMツリーを持っている。DOM操作が多くなるとツリーの再構築に時間がかかり、画面表示が遅くなる。仮想DOMはこの処理を効率化するための技術である。
画面アクション前後のDOMの差分を抽出し、変更部分のみ反映させるため、画面への表示が最速化できる。
createdとmounted
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello, World!</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
},
created() {
//インスタンス生成時に実行される（DOM生成前）
console.log('created !');
console.log(document.getElementById('app').textContent.trim());
},
mounted() {
//インスタンス生成時に実行される（DOM生成後）
console.log('mounted !');
console.log(document.getElementById('app').textContent.trim());
}
})
</script>
</body>
</html>
created(DOM生成前のタイミング)では、Vue.jsで処理される前の{{message}}がそのまま表示される。
mounted(DOM生成後のタイミング)では、Vue.jsに処理された後の「Hello, World」が表示される。
createdとmountedではDOMの生成タイミングが異なることがわかる。
ライフサイクルダイアグラム
Vue.jsにはライフサイクルが存在する。たとえば、フックには updated(画面変更時に呼ばれるフック。仮想DOMに差分が発生した際に、差分を画面に反映する際に呼ばれる)や destroyed (Vue インスタンスが破棄された後に呼ばれるフック)などがあり、すべてのライフサイクルフックは、this (JavaScriptに最初から用意されている特別な変数)が Vue インスタンス自身を指す形で実行される。
この記事が気に入ったらサポートをしてみませんか？