V-DOM native rendering pipeline (illustration)

retrieve data

var model = {
msg: 'hello '
}

创建 VDOM
var vdom = {
tag: 'DIV',
attr: {
className: 'box'
},
children: [
{
tag: 'UL',
attr: {},
children: [
{
tag: 'li',
attr: {},
content: model.msg
}
]
}
]
}

Rendering dom [render]

var box = document.createElement('DIV')
var ul = document.createElement('UL')
var li = document.createElement('LI')

box.className = vdom.attr.className
li.innerHTML = vdom.children[0].children[0].content

ul.appendChild(li)
box.appendChild(ul)
document.body.appendChild( box )

Data change
model.msg = "hello 1905"

Remanufactured VDOM [the render]
VDOM = {
Tag: 'the DIV',
attr: {
className: 'Box'
},
Children: [
{
Tag: 'the UL',
attr: {},
Children: [
{
Tag: 'Li',
attr: {},
Content: model.msg
}
]
}
]
}

Diff algorithm by comparing two vdom will pick out the differences, to form a patch patch objects [objects], go to re-render the page