# Vue2.x源码分析 - Virtual DOM实现

Vue Virtual DOM实现是基于snabbdom库改造的，所以理解snabbdom源码有助于我们更好的看懂Vue源码（实际上Vue源码中有非常多相似的地方，比如diff算法、hooks应用等）。snabbdom源码更纯粹，也更容易理解，具体可以看笔者另外一篇文章：虚拟dom算法库 - snabbdom。以下我们对比看下Virtual DOM在Vue源码中的应用。

# 基本数据结构

    VNode {
      tag: string | void; // 标签tag
      data: VNodeData | void; // 数据，包括事件监听、class、style等
      children: ?Array<VNode>; // 子VNodes
      text: string | void; // 文本
      elm: Node | void; // VNode对应的真实DOM
      ns: string | void;
      key: string | number | void; // 唯一key
    
      // 组件
      context: Component | void; // rendered in this component's scope
      functionalContext: Component | void; // only for functional component root nodes
      componentOptions: VNodeComponentOptions | void;
      componentInstance: Component | void; // component instance
    
      parent: VNode | void; // component placeholder node
      raw: boolean; // contains raw HTML? (server only)
      isStatic: boolean; // 标记为静态
      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?
    

    VNodeData {
      key?: string | number;
      slot?: string;
      ref?: string;
      is?: string;
      pre?: boolean;
      tag?: string;
      staticClass?: string;
      class?: any;
      staticStyle?: { [key: string]: any };
      style?: Array<Object> | Object;
      normalizedStyle?: Object;
      props?: { [key: string]: any };
      attrs?: { [key: string]: string };
      domProps?: { [key: string]: any };
      hook?: { [key: string]: Function };
      on?: ?{ [key: string]: Function | Array<Function> };
      nativeOn?: { [key: string]: Function | Array<Function> };
      transition?: Object;
      show?: boolean; // marker for v-show
      inlineTemplate?: {
        render: Function;
        staticRenderFns: Array<Function>;
      };
      directives?: Array<VNodeDirective>;
      keepAlive?: boolean;
      scopedSlots?: { [key: string]: Function };
      model?: {
        value: any;
        callback: Function;
      };
    };
    

# 源码笔记

• src/core/vdom/vnode.js: 对应snabbdom/vnode.ts源码

  • 定义VNode数据结构，并有创建VNode实例基础方法。

• src/core/vdom/create-element.js: 对应snabbdom/h.ts

  • 应用层新建一个VNode实例，包含一些数据预处理。
  • vue在snabbdom基础上，增加了Component System。

      // 应用层说明
      createElement(
        // {String | Object | Function}
        'div',
      
        // {Object}
        // 一个与模板中属性对应的数据对象。可选。
        {
          // (详情见下面)
        },
      
        // {String | Array}
        // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
        // 也可以使用字符串来生成“文本虚拟节点”。可选。
        [
          '先写一些文字',
          createElement('h1', '一则头条'),
          createElement(MyComponent, {
            props: {
              someProp: 'foobar'
            }
          })
        ]
      )
      

      // 源码解释
      export function createElement (
        context: Component,
        tag: any,
        data: any,
        children: any,
        normalizationType: any,
        alwaysNormalize: boolean
      ): VNode | Array<VNode> {
        // data可省略，会判断参数类型，data非object会被认为省略
        if (Array.isArray(data) || isPrimitive(data)) {
          normalizationType = children
          children = data
          data = undefined
        }
        if (isTrue(alwaysNormalize)) {
          normalizationType = ALWAYS_NORMALIZE
        }
        return _createElement(context, tag, data, children, normalizationType)
      

• platforms/web/runtime/node-ops.js: 对应snabbdom/htmldomapi.ts源码

  • 封装DOM API

• src/core/vdom/patch.js: 对应snabbdom/snabbdom.ts

  • vdom diff核心内容。diff算法与snabbdom大同小异
  • vue patch.js里面的createPatchFunction方法，等同于snabbdom.ts的init方法，会默认注入一些模块。

• platforms/web/runtime/modules文件夹: 对应snabbdom/modules文件夹

  • 注入默认模块，在dom合适的时间调用这些模块的hook
  • attrs.js: 根据VNode.data.attrs值。设置html的属性，能反应到html元素上
  • dom-props.js 根据VNode.data.domProps值。设置dom的属性
  • class.js: 根据VNode.data.class值。 设置html className。Vue官方API (opens new window) (opens new window)
  • style.js: 根据VNode.data.style值。设置html style。Vue官方API (opens new window) (opens new window)
  • event.js: 根据VNode.data.on值。设置html event事件。Vue官方API (opens new window) (opens new window)
  • src/core/vdom/modules/directives.js 根据VNode.data.directives值。绑定指令（指令hook如bind、update回调应用也在这）。Vue官方API (opens new window) (opens new window)
  • src/core/vdom/modules/ref.js 根据VNode.data.ref/refInFor值。注册ref，使得通过vm.$refs[key]能拿到VNode.elm(VNode一般不会暴露给外面)

      {
        // 与 `v-bind:class` 的 API 相同，
        // 接受一个字符串、对象或字符串和对象组成的数组
        'class': {
          foo: true,
          bar: false
        },
        // 与 `v-bind:style` 的 API 相同，
        // 接受一个字符串、对象，或对象组成的数组
        style: {
          color: 'red',
          fontSize: '14px'
        },
        // 普通的 HTML 特性
        attrs: {
          id: 'foo'
        },
        // 组件 prop
        props: {
          myProp: 'bar'
        },
        // DOM 属性
        domProps: {
          innerHTML: 'baz'
        },
        // 事件监听器在 `on` 属性内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        // 需要在处理函数中手动检查 keyCode。
        on: {
          click: this.clickHandler
        },
        // 仅用于组件，用于监听原生事件，而不是组件内部使用
        // `vm.$emit` 触发的事件。
        nativeOn: {
          click: this.nativeClickHandler
        },
        // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
        // 赋值，因为 Vue 已经自动为你进行了同步。
        directives: [
          {
            name: 'my-custom-directive',
            value: '2',
            expression: '1 + 1',
            arg: 'foo',
            modifiers: {
              bar: true
            }
          }
        ],
        // 作用域插槽的格式为
        // { name: props => VNode | Array<VNode> }
        scopedSlots: {
          default: props => createElement('span', props.text)
        },
        // 如果组件是其它组件的子组件，需为插槽指定名称
        slot: 'name-of-slot',
        // 其它特殊顶层属性
        key: 'myKey',
        ref: 'myRef',
        // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
        // 那么 `$refs.myRef` 会变成一个数组。
        refInFor: true
      }