vue.js学习二：虚拟DOM

为什么引入虚拟DOM：

解决Vue1.0粒度太细导致的内存消耗和依赖追踪的开销（以前依赖是DOM级别的，现在依赖是组件级别的），vue.js能调节绑定的粒度， 主要还得归功于他的变化侦测原理。

虚拟DOM做哪些事：

1、提供与真实DOM对应的虚拟节点vnode

2、将vnode与旧的虚拟节点oldvnode进行对比， 进行更新视图

vnode是什么：

vnode是一个js对象来描述真是DOM

vnode作用是什么:

1、兼容性强，不受执行环境的影响，node和浏览器环境都可执行

2、减少真实DOM的操作，只需对比和修改虚拟DOM， 最后一步挂载和更新DOM

vnode怎么生成：

function VNode(
    tag, data, children, 
    text, elm, context, 
    componentOptions

) {    

    this.tag = tag; // 标签名

    this.data = data;    

    this.children = children; // 子元素

    this.text = text; // 文本内容

    this.elm = elm; // Dom 节点



    this.context = context;    

    this.componentOptions = componentOptions;    

    this.componentInstance = undefined;    

    this.parent = undefined;    

    this.isStatic = false; // 是否静态节点

    this.isComment = false; // 是否是注释节点

    this.isCloned = false; // 是否克隆节点

};

其中必要的属性有， data, elm(真实DOM 节点), context(渲染这个模板的上下文对象),isStatic

在初始化完选项，解析完模板之后，就需要挂载 DOM了。此时就需要生成 VNode，才能根据 VNode 生成 DOM 然后挂载

挂载 DOM 第一步，就是先执行渲染函数，得到整个模板的 VNode

该图引自知乎作者自然醒