V-DOM的原生渲染流程（举例说明）

获取数据

var model = {
msg: 'hello '
}

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

渲染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 )

数据改变
model.msg = "hello 1905"

重新生产vdom [ render ]
vdom = {
tag: 'DIV',
attr: {
className: 'box'
},
children: [
{
tag: 'UL',
attr: {},
children: [
{
tag: 'li',
attr: {},
content: model.msg
}
]
}
]
}

通过diff算法进行两个vdom的比较，将不同之处挑选出来，形成一个patch对象【 补丁对象 】，再去重新渲染页面