抽象DOM树

在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。

那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。

可以想象，最简单粗暴的方法就是将整个DOM结构用innerHTML修改到页面上，但是这样进行重绘整个视图层是相当消耗性能的，我们是不是可以每次只更新它的修改呢？所以Vue.js将DOM抽象成一个以JavaScript对象为节点的虚拟DOM树，以VNode节点模拟真实DOM，可以对这颗抽象树进行创建节点、删除节点以及修改节点等操作，在这过程中都不需要操作真实DOM，只需要操作JavaScript对象后只对差异修改，相对于整块的innerHTML的粗暴式修改，大大提升了性能。修改以后经过diff算法得出一些需要修改的最小单位，再将这些小单位的视图进行更新。这样做减少了很多不需要的DOM操作，大大提高了性能。

Vue就使用了这样的抽象节点VNode，它是对真实DOM的一层抽象，而不依赖某个平台，它可以是浏览器平台，也可以是weex，甚至是node平台也可以对这样一棵抽象DOM树进行创建删除修改等操作，这也为前后端同构提供了可能。

VNode基类

先来看一下Vue.js源码中对VNode类的定义。

  1. export default class VNode {
  2.   tag: string | void;
  3.   data: VNodeData | void;
  4.   children: ?Array<VNode>;
  5.   text: string | void;
  6.   elm: Node | void;
  7.   ns: string | void;
  8.   context: Component | void; // rendered in this component's scope
  9.   functionalContext: Component | void; // only for functional component root nodes
  10.   key: string | number | void;
  11.   componentOptions: VNodeComponentOptions | void;
  12.   componentInstance: Component | void; // component instance
  13.   parent: VNode | void; // component placeholder node
  14.   raw: boolean; // contains raw HTML? (server only)
  15.   isStatic: boolean; // hoisted static node
  16.   isRootInsert: boolean; // necessary for enter transition check
  17.   isComment: boolean; // empty comment placeholder?
  18.   isCloned: boolean; // is a cloned node?
  19.   isOnce: boolean; // is a v-once node?
  21.   constructor (
  22.     tag?: string,
  23.     data?: VNodeData,
  24.     children?: ?Array<VNode>,
  25.     text?: string,
  26.     elm?: Node,
  27.     context?: Component,
  28.     componentOptions?: VNodeComponentOptions
  29.   ) {
  30.     /*当前节点的标签名*/
  31.     this.tag = tag
  32.     /*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/
  33.     this.data = data
  34.     /*当前节点的子节点，是一个数组*/
  35.     this.children = children
  36.     /*当前节点的文本*/
  37.     this.text = text
  38.     /*当前虚拟节点对应的真实dom节点*/
  39.     this.elm = elm
  40.     /*当前节点的名字空间*/
  41.     this.ns = undefined
  42.     /*编译作用域*/
  43.     this.context = context
  44.     /*函数化组件作用域*/
  45.     this.functionalContext = undefined
  46.     /*节点的key属性，被当作节点的标志，用以优化*/
  47.     this.key = data && data.key
  48.     /*组件的option选项*/
  49.     this.componentOptions = componentOptions
  50.     /*当前节点对应的组件的实例*/
  51.     this.componentInstance = undefined
  52.     /*当前节点的父节点*/
  53.     this.parent = undefined
  54.     /*简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false*/
  55.     this.raw = false
  56.     /*静态节点标志*/
  57.     this.isStatic = false
  58.     /*是否作为根节点插入*/
  59.     this.isRootInsert = true
  60.     /*是否为注释节点*/
  61.     this.isComment = false
  62.     /*是否为克隆节点*/
  63.     this.isCloned = false
  64.     /*是否有v-once指令*/
  65.     this.isOnce = false
  66.   }
  68.   // DEPRECATED: alias for componentInstance for backwards compat.
  69.   /* istanbul ignore next */
  70.   get child (): Component | void {
  71.     return this.componentInstance
  72.   }
  73. }

这是一个最基础的VNode节点，作为其他派生VNode类的基类，里面定义了下面这些数据。

tag: 当前节点的标签名

data: 当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息

children: 当前节点的子节点，是一个数组

text: 当前节点的文本

elm: 当前虚拟节点对应的真实dom节点

ns: 当前节点的名字空间

context: 当前节点的编译作用域

functionalContext: 函数化组件作用域

key: 节点的key属性，被当作节点的标志，用以优化

componentOptions: 组件的option选项

componentInstance: 当前节点对应的组件的实例

parent: 当前节点的父节点

raw: 简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false

isStatic: 是否为静态节点

isRootInsert: 是否作为跟节点插入

isComment: 是否为注释节点

isCloned: 是否为克隆节点

isOnce: 是否有v-once指令

打个比方，比如说我现在有这么一个VNode树

  1. {
  2.     tag: 'div'
  3.     data: {
  4.         class: 'test'
  5.     },
  6.     children: [
  7.         {
  8.             tag: 'span',
  9.             data: {
  10.                 class: 'demo'
  11.             }
  12.             text: 'hello,VNode'
  13.         }
  14.     ]
  15. }

渲染之后的结果就是这样的

  1. <div class="test">
  2.     <span class="demo">hello,VNode</span>
  3. </div>

生成一个新的VNode的方法

下面这些方法都是一些常用的构造VNode的方法。

createEmptyVNode 创建一个空VNode节点

  1. /*创建一个空VNode节点*/
  2. export const createEmptyVNode = () => {
  3.   const node = new VNode()
  4.   node.text = ''
  5.   node.isComment = true
  6.   return node
  7. }

createTextVNode 创建一个文本节点

  1. /*创建一个文本节点*/
  2. export function createTextVNode (val: string | number) {
  3.   return new VNode(undefined, undefined, undefined, String(val))
  4. }

createComponent 创建一个组件节点

  1.  // plain options object: turn it into a constructor
  2.   if (isObject(Ctor)) {
  3.     Ctor = baseCtor.extend(Ctor)
  4.   }
  6.   // if at this stage it's not a constructor or an async component factory,
  7.   // reject.
  8.   /*Github:https://github.com/answershuto*/
  9.   /*如果在该阶段Ctor依然不是一个构造函数或者是一个异步组件工厂则直接返回*/
  10.   if (typeof Ctor !== 'function') {
  11.     if (process.env.NODE_ENV !== 'production') {
  12.       warn(`Invalid Component definition: ${String(Ctor)}`, context)
  13.     }
  14.     return
  15.   }
  17.   // async component
  18.   /*处理异步组件*/
  19.   if (isUndef(Ctor.cid)) {
  20.     Ctor = resolveAsyncComponent(Ctor, baseCtor, context)
  21.     if (Ctor === undefined) {
  22.       // return nothing if this is indeed an async component
  23.       // wait for the callback to trigger parent update.
  24.       /*如果这是一个异步组件则会不会返回任何东西（undifiened），直接return掉，等待回调函数去触发父组件更新。s*/
  25.       return
  26.     }
  27.   }
  29.   // resolve constructor options in case global mixins are applied after
  30.   // component constructor creation
  31.   resolveConstructorOptions(Ctor)
  33.   data = data || {}
  35.   // transform component v-model data into props & events
  36.   if (isDef(data.model)) {
  37.     transformModel(Ctor.options, data)
  38.   }
  40.   // extract props
  41.   const propsData = extractPropsFromVNodeData(data, Ctor, tag)
  43.   // functional component
  44.   if (isTrue(Ctor.options.functional)) {
  45.     return createFunctionalComponent(Ctor, propsData, data, context, children)
  46.   }
  48.   // extract listeners, since these needs to be treated as
  49.   // child component listeners instead of DOM listeners
  50.   const listeners = data.on
  51.   // replace with listeners with .native modifier
  52.   data.on = data.nativeOn
  54.   if (isTrue(Ctor.options.abstract)) {
  55.     // abstract components do not keep anything
  56.     // other than props & listeners
  57.     data = {}
  58.   }
  60.   // merge component management hooks onto the placeholder node
  61.   mergeHooks(data)
  63.   // return a placeholder vnode
  64.   const name = Ctor.options.name || tag
  65.   const vnode = new VNode(
  66.     `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
  67.     data, undefined, undefined, undefined, context,
  68.     { Ctor, propsData, listeners, tag, children }
  69.   )
  70.   return vnode
  71. }

cloneVNode 克隆一个VNode节点

  1. export function cloneVNode (vnode: VNode): VNode {
  2.   const cloned = new VNode(
  3.     vnode.tag,
  4.     vnode.data,
  5.     vnode.children,
  6.     vnode.text,
  7.     vnode.elm,
  8.     vnode.context,
  9.     vnode.componentOptions
  10.   )
  11.   cloned.ns = vnode.ns
  12.   cloned.isStatic = vnode.isStatic
  13.   cloned.key = vnode.key
  14.   cloned.isCloned = true
  15.   return cloned
  16. }

createElement

  1. // wrapper function for providing a more flexible interface
  2. // without getting yelled at by flow
  3. export function createElement (
  4.   context: Component,
  5.   tag: any,
  6.   data: any,
  7.   children: any,
  8.   normalizationType: any,
  9.   alwaysNormalize: boolean
  10. ): VNode {
  11.   /*兼容不传data的情况*/
  12.   if (Array.isArray(data) || isPrimitive(data)) {
  13.     normalizationType = children
  14.     children = data
  15.     data = undefined
  16.   }
  17.   /*如果alwaysNormalize为true，则normalizationType标记为ALWAYS_NORMALIZE*/
  18.   if (isTrue(alwaysNormalize)) {
  19.     normalizationType = ALWAYS_NORMALIZE
  20.   }
  21.   /*Github:https://github.com/answershuto*/
  22.   /*创建虚拟节点*/
  23.   return _createElement(context, tag, data, children, normalizationType)
  24. }
  26. /*创建虚拟节点*/
  27. export function _createElement (
  28.   context: Component,
  29.   tag?: string | Class<Component> | Function | Object,
  30.   data?: VNodeData,
  31.   children?: any,
  32.   normalizationType?: number
  33. ): VNode {
  34.   /*
  35.     如果传递data参数且data的__ob__已经定义（代表已经被observed，上面绑定了Oberver对象），
  36.     https://cn.vuejs.org/v2/guide/render-function.html#约束
  37.     那么创建一个空节点
  38.   */
  39.   if (isDef(data) && isDef((data: any).__ob__)) {
  40.     process.env.NODE_ENV !== 'production' && warn(
  41.       `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
  42.       'Always create fresh vnode data objects in each render!',
  43.       context
  44.     )
  45.     return createEmptyVNode()
  46.   }
  47.   /*如果tag不存在也是创建一个空节点*/
  48.   if (!tag) {
  49.     // in case of component :is set to falsy value
  50.     return createEmptyVNode()
  51.   }
  52.   // support single function children as default scoped slot
  53.   /*默认默认作用域插槽*/
  54.   if (Array.isArray(children) &&
  55.       typeof children[0] === 'function') {
  56.     data = data || {}
  57.     data.scopedSlots = { default: children[0] }
  58.     children.length = 0
  59.   }
  60.   if (normalizationType === ALWAYS_NORMALIZE) {
  61.     children = normalizeChildren(children)
  62.   } else if (normalizationType === SIMPLE_NORMALIZE) {
  63.     children = simpleNormalizeChildren(children)
  64.   }
  65.   let vnode, ns
  66.   if (typeof tag === 'string') {
  67.     let Ctor
  68.     /*获取tag的名字空间*/
  69.     ns = config.getTagNamespace(tag)
  70.     /*判断是否是保留的标签*/
  71.     if (config.isReservedTag(tag)) {
  72.       // platform built-in elements
  73.       /*如果是保留的标签则创建一个相应节点*/
  74.       vnode = new VNode(
  75.         config.parsePlatformTagName(tag), data, children,
  76.         undefined, undefined, context
  77.       )
  78.     } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
  79.       // component
  80.       /*从vm实例的option的components中寻找该tag，存在则就是一个组件，创建相应节点，Ctor为组件的构造类*/
  81.       vnode = createComponent(Ctor, data, context, children, tag)
  82.     } else {
  83.       // unknown or unlisted namespaced elements
  84.       // check at runtime because it may get assigned a namespace when its
  85.       // parent normalizes children
  86.       /*未知的元素，在运行时检查，因为父组件可能在序列化子组件的时候分配一个名字空间*/
  87.       vnode = new VNode(
  88.         tag, data, children,
  89.         undefined, undefined, context
  90.       )
  91.     }
  92.   } else {
  93.     // direct component options / constructor
  94.     /*tag不是字符串的时候则是组件的构造类*/
  95.     vnode = createComponent(tag, data, context, children)
  96.   }
  97.   if (isDef(vnode)) {
  98.     /*如果有名字空间，则递归所有子节点应用该名字空间*/
  99.     if (ns) applyNS(vnode, ns)
  100.     return vnode
  101.   } else {
  102.     /*如果vnode没有成功创建则创建空节点*/
  103.     return createEmptyVNode()
  104.   }
  105. }

createElement用来创建一个虚拟节点。当data上已经绑定ob的时候，代表该对象已经被Oberver过了，所以创建一个空节点。tag不存在的时候同样创建一个空节点。当tag不是一个String类型的时候代表tag是一个组件的构造类，直接用new VNode创建。当tag是String类型的时候，如果是保留标签，则用new VNode创建一个VNode实例，如果在vm的option的components找得到该tag，代表这是一个组件，否则统一用new VNode创建。