8.Virtual Dom

1.Vue.js 2.x 与 Vue.js 1.x 最大的区别就在于2.x使用了Virtual Dom（虚拟DOM）来更新DOM节点，提升渲染性能。
2.虽然前面我们的组件模板都是写在template选项里的，但是在Vue.js编译时，都会解析为Virtual Dom。
3.React 和 Vue2 都适用了Virtual Dom技术，Virtual Dom 并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom 会进行Diff 运算，来更新只需要被替换的DOM，而不是全部重绘。与DOM操作相比，Virtual Dom 是基于JavaScript计算的，所以开销会小很多。Virtual Dom运行的过程：

image.png

//正常的DOM节点在HTML中是这样的：
<div id="main">
    <p>文本内容</p>    
    <p>文本内容</p>
</div>

// 用Virtual Dom 创建的JavaScript 对象一般会是这样的：
 var vNode = {
        tag:'div',
        attributes:{
            id:'main'
        },
        children:[
            // p 节点
        ]
    }

vNode对象通过一些特定的选项描述了真实的DOM结构。

4.在Vue.js 2中，Virtual Dom就是通过一种 VNode 类表达的，每个DOM元素或组件都对应一个VNode对象，在Vue.js 源码中是这样定义的：

export interface VNode{
    tag?: string;  //当前节点的标签名
    data?: VNodeData; // 当前节点的数据对象
    children?: VNode[]; //子节点，数组，也是VNode类型
    text?: Node; //当前节点的文本，一般文本节点或注释节点会有该属性
    elm?: Node;//当前虚拟节点对应的真实的DOM节点
    ns?: string;//节点的namespace
    context?: Vue;//编译作用域
    key?: string | number ;//节点的key属性，用于作为节点的标识，有利于patch的优化
    componentOptions?: VNodeComponentOptions;//创建组件实例时会用到的选项信息
    componentInstance?: Vue;
    parent?: VNode;//组件的占位节点
    raw?: boolean;//原始html
    isStatic?: boolean;//静态节点的标识
    isRootInsert: boolean;//是否作为根结点插入，被<transition>包裹的节点，该属性的值为false
    isComment: boolean;//当前节点是否是注释节点
}
// VNodeData代码：
export interface VNodeData{
    key?: string | number;
    slot?: string;
    scopedSlots?: {[key:string]:ScopedSlot};
    ref?: string;
    tag?: string ;
    staticClass?: string;
    class?: any;
    staticStyle?: {[key:string]:any};
    style?: Object[] | Object;
    props?: {[key:string]:any};
    attrs?: {[key:string]:any};
    domProps?: {[key:string]:any};
    hook?: {[key:string]:Function};
    on?:{[key:string]:Function | Function[]};
    nativeOn?:{[key:string]:Function | Function[]};
    transition?: Object;
    show?: boolean;
    inlineTemplate?: {
        render: Function;
        staticRenderFns:Function[];
    };
    directives?: VNodeDirective[];
    keepAlive?: boolean;
}

functionalContext //函数和组件的作用域
isCloned: boolean // 当前节点是否为克隆节点
isOnce: boolean // 当前节点是否有v-once指令

5.VNode 主要可以分为以下几类：

TextVNode 文本节点
ElementVNode 普通元素节点
ComponentVNode 组件节点
EmptyVNode 没有内容的注释节点
CloneVNode 克隆节点，可以是以上任意类型的节点，唯一的区别在于 isCloned 属性为true

image.png

最后编辑于：2020.05.31 22:27:41