Vue.js virtual dom and diff algorithm

What is virtual dom?

Virtual DOM is also called vdom. In fact, it uses the Object model of js Object to simulate the real DOM, so its structure is a tree structure; vdom will render once as soon as it is created
Take a look at the code

//Initial virtual dom structure
var vdom = {
    vnode: {
        tag: 'div',
        attr: {
            idName: '#app'
        },
        content: [
            {
                tag: 'header',
                content: [
                    'head'
                ]
            },
            {
            tag: 'section',
                content: [
                     'content'
                ]
            },
            {
                tag: 'footer',
                content: [
                     'bottom'
                ]
            }
        ]
    }
}

//This is the vdom after modification once, with an id called hender added. Every time the virtual dom is modified, a new vdom will be generated again, and then after several modifications, many vdoms will be generated. After the final modification, the vdom will be judged by diff algorithm, and the real dom will be generated by the render() function of vue, which will be described below;
var vdom = {
    vnode: {
        tag: 'div',
        attr: {
            idName: '#app'
        },
        content: [
            {
                tag: 'header',
                attr:{
                    idName:'header'
                   }
                content: [
                    'head'
                ]
            },
            {
            tag: 'section',
                content: [
                     'content'
                ]
            },
            {
                tag: 'footer',
                content: [
                     'bottom'
                ]
            }
        ]
    }
}

Range() function

The official website of vue has a specific description, which roughly means that it is dom through the createElement method of native js

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

diff algorithm

• diff algorithm is used to compare two or more files. The return value is the difference of files
• diff algorithm is peer-to-peer comparison
• diff thinking also comes from the back end

Comparative thinking of diff algorithm

There are four situations after comparison:
1. Whether this node is removed - > add a new node
2. Whether the attribute is changed - > change the old attribute to the new one
3. Text content changed - > old content changed to new content
4. The node should be replaced by the whole - > the structure is completely different remove the whole replacement

Use process of the whole VDOM (Vue)

• Create VDOM tree
• Rendering page with render function
• Data change, generate new vDOM
• Compare the old and new vdoms by diff algorithm, modify the different places, reuse the same places in place, and finally render the page by render function