开始

这篇写一下virtual dom.

为什么会出现virtualDom

因为Dom上面有很多属性，方法，导致dom天生很慢，我们看看dom有什么，跑下面的代码，看代码

  var a = document.createElement('a');
    var str='';
    for(var k in a){
      str+=k+' '
    }
    console.log(str)

挂这么多东西，不慢才怪呢。

virtualDom是什么

对Dom的一种抽象

Vue中virtualDom的定义

看看vue中virtualDom的定义，就是上一节的 vnode

export default class VNode {
    //标签名
  tag: string | void;
    //数据
  data: VNodeData | void;
//子dom
  children: ?Array<VNode>;
  text: string | void;
//dom元素
  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

  // strictly internal
  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
  devtoolsMeta: ?Object; // used to store functional render context for devtools
  fnScopeId: ?string; // functional scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child (): Component | void {
    return this.componentInstance
  }
}

就是减了很多原来dom上用不太到的东西。简化了Dom,我们自己也可以写一个简易版的Virtual dom

let vNodes = v('div',{
    attr:{
        id:"abc"
    }
},'sdji')

上面这个大概就是 下面的dom，可以这样理解

<div id="abc" >sdji</div>

就是语法糖吧

总结

这里要了解为什么用虚拟dom和虚拟dom在vue中用vnode表示就可以了