ビットによる VNode の表現

VNode の種類をビットで表現する

VNode にはいろんな種類のものがあります。例えば、今実装しているものだと、以下のようなものです。

component node
element node
text node
子要素が text かどうか
子要素が配列かどうか

そして、これから先はさらにいろんな種類の Vnode が追加実装されることでしょう。
例えば、slot, keep-alive, suspense, teleport などがそうです。

今のところ、type === Text や typeof type === "string", typeof type === "object" などで分岐をおこなっています。

これらをいちいち判定するのは非効率ですし、本家の実装に倣ってビットで表現することにしてみましょう。
Vue ではこれらのビットは ShapeFlags と呼ばれています。その名の通り、VNode の Shape を表すものです。
(厳密には Vue ではこの ShapeFlags と Text や Fragment などの Symbol を使って VNode の種類を判別しています)
https://github.com/vuejs/core/blob/main/packages/shared/src/shapeFlags.ts

ビットフラグがどのようなものかというと、数値の各ビットを特定のフラグとしてみなすというものです。

例として以下のような VNode を考えます。

const vnode = {
  type: 'div',
  children: [
    { type: 'p', children: ['hello'] },
    { type: 'p', children: ['hello'] },
  ],
}

まず、フラグの初期値は 0 です。(簡略化のため 8bit で説明しています。)

let shape = 0b0000_0000

ここで、この VNode は element であり、子要素を配列で持っているので ELEMENT というフラグと ARRAY_CHILDREN というフラグが立ちます。

shape = shape | ShapeFlags.ELEMENT | ELEMENT.ARRAY_CHILDREN // 0x00010001

これにより、shape というただ一つの数値で「element でありかつ、子要素を配列を持っている」という情報を表現できました。
あとはこれを renderer 等の分岐で使用すれば効率的に VNode の種類を管理できます。

if (vnode.shape & ShapeFlags.ELEMENT) {
  // vnodeがelementの時の処理
}

今回は、すべての ShapeFlags を実装するわけではないので、練習として以下を実装してみてください。

export const enum ShapeFlags {
  ELEMENT = 1,
  COMPONENT = 1 << 2,
  TEXT_CHILDREN = 1 << 3,
  ARRAY_CHILDREN = 1 << 4,
}

やることとしては、

shared/shapeFlags.ts にフラグを定義
runtime-core/vnode.ts で vnode に shape を定義
ts
```
export interface VNode<HostNode = any> {
  shapeFlag: number
}
```
を追加し、createVNode などで flag を算出してください。
renderer では shape を元に分岐処理を実装する。

です!

なんとこのチャプターの説明は以上です。実際に実装していきましょう !

ビットによる VNode の表現 ​

VNode の種類をビットで表現する ​

ビットによる VNode の表現

VNode の種類をビットで表現する