当先锋百科网

首页 1 2 3 4 5 6 7

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函数渲染页面