Vue masteryでEvan YouからVueの構造を学ぶ

Vue mastery

vue masteryとは、vueの学習用のビデオ教材を提供しているサービスである。
この教材の中に、vueの創設者であるEvan YouからVueを学べるコースがある。

この講義からrender function話が面白かったので、自分なりに以下まとめメモを書いてみる。

ブラウザの基礎

ブラウザには大きく分けて、レンダリングエンジン、Javascriptエンジン、ネットワーク部、Data Storageの４つの機能を持つ

ここではレンダリングエンジンに注目する。

Webページのレンダリングは
htmlの解析→DOMツリーの構築→CSSのパースとStyleの反映→レイアウト→Paint→Composit&Render
という流れで行われる。

ここでvueは（Reactなども）html parseの際、DOMに干渉することで、高速なリアクティビティを実現させている。
DOMとはブラウザから提供されたWeb APIである。直接DOM（virtual DOMに対して、real DOMと呼ばれる）を操作することもできるのだが、VueやReactは、virtual DOMと呼ばれるデータ構造を持ち、そこからreal DOMを構築する。

App.mount()で起こること

virtual DOMからreal DOMが構築される過程をマウントと呼ぶ。
公式では以下のように記述されている。

レンダリングパイプライン
コンパイル：Vueテンプレートは、レンダー関数（仮想DOMツリーを返す関数）にコンパイルされます。このステップは、ビルドステップによって事前に実行することも、ランタイムコンパイラを使用してその場で実行することもできます。
マウント：ランタイム・レンダラーがレンダー関数を呼び出し、返された仮想DOMツリーをウォーキングし、それに基づいて実際のDOMノードを作成する。このステップはリアクティブ効果として実行されるため、使用されたすべてのリアクティブ依存関係を追跡します。
パッチ：パッチマウント中に使用された依存関係が変更されると、エフェクトが再実行されます。このとき、更新された新しい仮想 DOM ツリーが作成されます。ランタイム・レンダラは新しいツリーを走査し、古いツリーと比較し、必要な更新を実際の DOM に適用します。

vue公式 rendering-mechanism

先ほど述べたように、vueにおけるリアクティビティーを、VDOMを利用して効率的に行うために、コンパイラーはテンプレートを解析する際に、レンダリングでVdomを作るときに、vueは今後patch関数によってUpdateを行う際にどこを比較すれば良いか、反対に言うと、どこを見逃して良いかを記録している。このようにして作られるVueのVDOMはCompiler-Informed Virtual DOMと呼ばれる。

レンダー関数構築時、またpatch実行時点でvueがどのようにDOMの更新を最適化するのかを理解することが重要である。その理解が不十分だと、リアクティブだと思っていたものがきちんと反映されなかったり、逆に不必要に再レンダリングを繰り返すことによってパフォーマンスの低下やバグを招きかねない。

レンダー関数の中身

それではこのレンダー関数はどのように作られているのだろうか？
vueではレンダー関数はhを利用して作られる。以下のような形をとる。

import { h, createApp } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

// Vueアプリケーションインスタンスの構築
// VDOMを返すレンダーファンクションを引数に取る
// 以下のコードで、idがappのNodeに<p>This is render function</p>というhtmlを追加できる。
const app = createApp({
   render() {
      return h('p', 'This is render function'); 
   },
}).mount('#app');

hはhyperscriptの略で、vnodeを返すjavascriptを意味する。
vue固有のものではなく、web APIではDOMParserというものでStringからDOMを返すこともできるし、MITライセンスのhyperscriptも存在する。

Vueファイルのtemplateがレンダー関数にコンパイルされる際に、v-on, v-if, v-forなどは解釈され、適切な最適化が行われたVDOMを返すレンダー関数が作られていく。
vue masteryではstatic hoistingやPatch Flagsという最適化の例が紹介されていた。

まとめ

vue masteryにおけるdeep dive with Evan Youの講義では、rendering function以外にも、mount functionやpatch function、リアクティビティの実現といったvueの根幹をなす機能がどのようにして構築されているかが解説されている。
月額費用はかかるものの、得るものはかなりあると思うし、また動画はダウンロードもできるので見直すことも簡単である。
まだ理解しきれていない部分も多分にあるので、動画を繰り返し見返しつつ公式ドキュメントやMdnを読み進めていきたい。

参考