Vue2-虚拟DOM

虚拟 DOM 是通过 JavaScript 对真实 DOM 的抽象表示，以一种更轻量的方式来描述 DOM 结构。

它通常是一个树形结构，包含了整个页面的结构信息，但不直接操作实际的 DOM 元素。当数据发生变化时，虚拟 DOM 可以高效地与实际 DOM 进行比较，并计算出最小化的变更，然后批量更新实际 DOM，从而减少不必要的 DOM 操作，提升页面性能。

1. VNode 数据结构

// 虚拟节点中所包含的属性
export default class VNode {
  tag: string | void; // 标签名
  data: VNodeData | void; // 数据
  children: ?Array<VNode>; // 子节点数组
  text: string | void;  // 真实节点所对应的文本
  elm: Node | void;  // 对应的真实dom
  key: string | number | void; // 元素上定义的key
  parent: VNode | void; // component placeholder node
  isStatic: boolean; // hoisted static node  // 是否是静态节点
  isComment: boolean; // 是否是注释节点
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?  // 是否是v-once的节点
}

2. HTML 转 VNode

<div class="app">
    <p class="title">标题</p>
    文本内容
</div>

{
    tag: 'div',
    data: { class: 'app' },
    children: [
        {
            tag: 'p',
            data: { class: 'title' },
            children: [ { text: '标题' } ]
        },
        { text: '文本内容' }
    ]
}