Vue 原理之从 VNode 到 Node 的流程

发表于 更新于 本文字数： 1.2k 阅读时长 ≈ 2 分钟

VNode 意即虚拟节点，每一个 VNode 对应一个 DOM Element。操作 VNode，Vue 会对变化进行 patch 操作，最后根据新的 VNode，进行 node-ops 生成 DOM 树。

graph LR
Component -- createElement --> VNode
VNode -- patch --> DOM
DOM -- platforms/web/runtime/node-ops.js --> Node

class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

  // 私有属性
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void; // async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void; // real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  fnScopeId: ?string; // functioanl scope id support
}