Vue 仮想 DOM クイックスタート

<div クラス = 'testId'>
    <p>こんにちは</p>
    <p>ようこそ</p>
</div>

{
    タグ: 'div',
    属性:
        クラス: ['testId']
    },
    子供たち：[
        // p 要素 // p 要素]
}

デフォルトクラスVNodeをエクスポートする{
   コンストラクタ（
    タグ?: 文字列、
    データ?: VNodeData、
    子?: ?Array<VNode>,
    テキスト?: 文字列、
    elm?: ノード、
    コンテキスト?: コンポーネント、
    コンポーネントオプション?: VNodeComponentOptions、
    asyncFactory?: 関数
  ）{
    this.tag = タグ
    this.data = データ
    this.children = 子供
    this.text = テキスト
    this.elm = エルム
    this.ns = 未定義
    this.context = コンテキスト
    this.fnContext = 未定義
    this.fnOptions = 未定義
    this.fnScopeId = 未定義
    this.key = データ && データ.key
    this.componentOptions = コンポーネントオプション
    this.componentInstance = 未定義
    this.parent = 未定義
    this.raw = 偽
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = 非同期ファクトリー
    this.asyncMeta = 未定義
    this.isAsyncPlaceholder = false
  }

  子を取得（）：コンポーネント | void {
    this.componentInstance を返す
  }
}

/*
コメント ノードの有効な属性: {isComment: true、テキスト: 'コメント ノード'}
*/
エクスポートconst createEmptyVNode = (テキスト: 文字列 = '') => {
  定数ノード = 新しい VNode()
  node.text = テキスト
  // コメント node.isComment = true
  戻りノード
}
/*
テキスト ノードの有効な属性: {text: 'text node'}
*/
エクスポート関数createTextVNode (値: 文字列 | 数値) {
  新しい VNode(undefined, undefined, undefined, String(val)) を返します
}

// 最適化された浅いクローン
// 静的ノードとスロットノードに使用されます。
// 静的ノードとスロットノードの場合 // 複数のレンダリングでは、それらを複製することで、DOM操作が
// elm 参照に基づきます。
// クローンノードエクスポート関数 cloneVNode (vnode: VNode): VNode {
  const クローン = 新しい VNode(
    vnode.タグ、
    vnode.data、
    //#7975
    // 複製の際に元の配列が変更されないように、子配列を複製します
    // 子供。
    vnode.children && vnode.children.slice(),
    vnode.text、
    vnode.elm、
    vnode.コンテキスト、
    vnode.componentOptions、
    vnode.asyncファクトリ
  ）
  クローン.ns = vnode.ns
  クローンされた.isStatic = vnode.isStatic
  クローンされたキー = vnode.key
  クローンされた.isComment = vnode.isComment
  クローンされたfnContext = vnode.fnContext
  クローンされたfnOptions = vnode.fnOptions
  クローンされたfnScopeId = vnode.fnScopeId
  クローンされたasyncMeta = vnode.asyncMeta
  // ノードをクローンとしてマークします。isCloned = true
  クローンを返す
}

<div>
  <p v-if="type === 'A'">
    私はノードAです
  </p>
  <span v-else-if="type === 'B'">
    私はAとは全く異なるノードBです
  </span>
</div>

// 要素を作成する function createElm (
  vノード、
  挿入されたVnodeQueue、
  親エルム、
  refElm、
  ネストされた、
  所有者配列、
  索引
）{
  if (isDef(vnode.elm) && isDef(ownerArray)) {
    // この vnode は以前のレンダリングで使用されました。
    // 今は新しいノードとして使用されているので、elmを上書きすると
    // 挿入として使用した場合、将来的にパッチエラーが発生する可能性があります
    // 参照ノード。代わりに、作成する前にオンデマンドでノードを複製します。
    // それに関連付けられた DOM 要素。
    vnode = ownerArray[インデックス] = cloneVNode(vnode);
  }

  vnode.isRootInsert = !nested; // 遷移のチェックに入る
  コンポーネントを作成する場合(vnode、挿入されたVnodeQueue、親Elm、refElm) {
    戻る
  }

  var データ = vnode.data;
  var children = vnode.children;
  var タグ = vnode.tag;
  // タグ属性を持ち、要素ノードであることを示す if (isDef(tag)) {
    vnode.elm = vnode.ns
      ? nodeOps.createElementNS(vnode.ns、タグ)
      // 要素を作成します。 nodeOps はクロスプラットフォームを伴います: nodeOps.createElement(tag, vnode);
    スコープを設定します(vnode);

    /* イスタンブールは無視します */
    {
      // 子ノードを再帰的に作成し、親ノードに挿入します。createChildren(vnode, children, insertedVnodeQueue);
      if (isDef(データ)) {
        フックの作成を呼び出します(vnode、挿入されたVnodeQueue);
      }
      //vnode に対応する要素を親要素に挿入します insert(parentElm, vnode.elm, refElm);
    }

  // isCommentプロパティはコメントノードを示します} else if (isTrue(vnode.isComment)) {
    vnode.elm = nodeOps.createComment(vnode.text);
    //親ノードを挿入insert(parentElm, vnode.elm, refElm);
  // それ以外の場合は子ノードです} else {
    vnode.elm は nodeOps.createTextNode(vnode.text);
    //親ノードを挿入insert(parentElm, vnode.elm, refElm);
  }
}

// 子ノードを再帰的に作成し、親ノードに挿入します。 vnodeは親ノードを表します。関数createChildren(vnode, children, insertedVnodeQueue){
  Array.isArray(children) の場合
    process.env.NODE_ENV !== 'production' の場合 {
      checkDuplicateKeys(子);
    }
    // 子ノードを一つずつ作成し、親ノードに挿入します for (var i = 0; i < children.length; ++i) {
      createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i);
    }
  } そうでない場合 (isPrimitive(vnode.text)) {
    nodeOps.appendChild(vnode.elm、nodeOps.createTextNode(String(vnode.text)));
  }
}

// 指定されたノードのセットを削除する function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
  (; startIdx <= endIdx; ++startIdx) の場合 {
    var ch = vnodes[startIdx];
    if (isDef(ch)) {
      if (isDef(ch.tag)) {
        削除フックを削除して呼び出します(ch);
        DestroyHook を呼び出します(ch);
      } else { // テキストノード
        // ノードを削除しますremoveNode(ch.elm);
      }
    }
  }
}

// 単一のノードを削除する function removeNode (el) {
  var 親 = nodeOps.parentNode(el);
  // 要素は v-html / v-text によりすでに削除されている可能性があります
  if (isDef(親)) {
    // nodeOps はクロスプラットフォーム メソッド nodeOps.removeChild(parent, el); をカプセル化します。
  }
}