虚拟DOM
-
为什么使用虚拟DOM 思考: 操作真实DOM所消耗的时间 和 操作数据所消耗的时间 ? 在循环中操作真实DOM消耗的时间很长
-
深入Vue2.x的虚拟DOM diff原理
虚拟DOM是在DOM的基础上在内存建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中
patch对象,即补丁对象 -
模拟虚拟DOM
1.获取数据
var model = {
msg: 'hello ’
}
2.创建VDOM对象
var vdom = {
tag: ‘DIV’,
attr: {
className: ‘box’
},
children: [
{
tag: ‘UL’,
attr: {},
children: [
{
tag: ‘LI’,
attr: {},
content: model.msg
}
]
}
]
}
3.渲染DOM
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 )
4.数据改变
model.msg = “hello 1905”
5.重新生成vDOM
vdom = {
tag: ‘DIV’,
attr: {
className: ‘box’
},
children: [
{
tag: ‘UL’,
attr: {},
children: [
{
tag: ‘li’,
attr: {},
content: model.msg
}
]
}
]
}
6.通过diff算法进行两个vdom的比较,将不同之处挑选出来,形成一个patch对象,即补丁对象,再去重新渲染
- diff算法
diff算法来源于后端读懂diff
这个算法来源于后端,它的作用就是比较两个文件,然后将两个文件中的不同之 处挑选出来,将挑选出来的内容