Vue.js虚拟dom和diff算法

Vue.js虚拟dom和diff算法

虚拟dom是什么呢？

虚拟dom也叫vdom，其实就是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构;vdom一开始刚创建出来就会先渲染一次
来看下代码

//初始的虚拟dom结构
var vdom = {
    vnode: {
        tag: 'div',
        attr: {
            idName: '#app'
        },
        content: [
            {
                tag: 'header',
                content: [
                    '头部'
                ]
            },
            {
            tag: 'section',
                content: [
                     '内容'
                ]
            },
            {
                tag: 'footer',
                content: [
                     '底部'
                ]
            }
        ]
    }
}

//这是修改一次之后的vdom，增加了一个id 叫 hender；每次修改虚拟dom，都会重新生成一个新的vdom，然后经过多次的修改，生成了很多的vdom，最后修改完成之后，通过diff算法来判断渲染那个vdom，通过vue的 render（）函数来生成真实dom，diff算法下面会讲；
var vdom = {
    vnode: {
        tag: 'div',
        attr: {
            idName: '#app'
        },
        content: [
            {
                tag: 'header',
                attr:{
                    idName:'header'
                   }
                content: [
                    '头部'
                ]
            },
            {
            tag: 'section',
                content: [
                     '内容'
                ]
            },
            {
                tag: 'footer',
                content: [
                     '底部'
                ]
            }
        ]
    }
}

rander()函数

vue的官网有具体描述，大致就是通过原生js的createElement方法来生成真是dom

function render(parentNode,vnode,id,className){
    var app = document.createElement('DIV')
    app.id = 'app'
    parentNode.appendChild(app)
}

diff算法

• diff算法是用来比较两个或是多个文件， 返回值是文件的不同点
• diff算法是同级比较的
• diff思维也是来自后端

diff算法的比较思维

比较后会出现四种情况：
1、此节点是否被移除 -> 添加新的节点
2、属性是否被改变 -> 旧属性改为新属性
3、文本内容被改变-> 旧内容改为新内容
4、节点要被整个替换 -> 结构完全不相同 移除整个替换

整个VDOM的使用流程（Vue）

• 创建VDOM树
• 利用render函数渲染页面
• 数据改变，生成新的vDOM
• 通过diff算法比较 新 旧 两个VDOM , 将不同的地方进行修改， 相同的地方就地复用 ， 最后在通过render函数渲染页面