开始

这篇写一下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
    
     ;  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
     
      ,    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，可以这样理解

    
     sdji
    
复制代码

就是语法糖吧

总结

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