虚拟DOM
1、用js来模拟DOM中的节点。传说中的虚拟DOM。
虚拟dom实现过程:
1.根据真实dom产生虚拟dom? 虚拟dom?就是一个特殊对象(经过一些处理能产生真实dom)
2.进行编译解析
3.将虚拟dom 变成真实dom 也就 挂载
4.数据发生变化 产生新的虚拟dom
5、将数据变化后的虚拟dom 和之前的虚拟dom 通过differ 算法 进行比对
6、比对之后更新视图 一样的不变 不一样重新渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>虚拟dom</title>
</head>
<body>
<span id='test'></span>
<ul id='test'>
<p class='hehe'>这里是p标签</p>
<li>{{1+1}}</li>
</ul>
</body>
<script>
//虚拟dom实现过程:
// 1.根据真实dom产生虚拟dom? 虚拟dom?就是一个特殊对象(经过一些处理能产生真实dom)
let vdom={
tag:'ul',
attr:{
id:'test'
},
content:[
{
tag:'p',
attr:{
class:'hehe'
},
content:'这里是p标签'
},
{
tag:'li',
content:1
}
]
}
// 2.进行编译解析
let vdom={
tag:'ul',
attr:{
id:'test'
},
content:[
{
tag:'p',
attr:{
class:'hehe'
},
content:'这里是p标签'
},
{
tag:'li',
content:2
}
]
}
//3.将虚拟dom 变成真实dom 也就 挂载
//4.数据发生变化 产生新的虚拟dom
let vdom={
tag:'ul',
attr:{
id:'test'
},
content:[
{
tag:'p',
attr:{
class:'hehe'
},
content:'这里是p标签'
},
{
tag:'li',
content:2
},
{
tag:'li',
content:2
}
]
}
//5、将数据变化后的虚拟dom 和之前的虚拟dom 通过differ 算法 进行比对
// 6、比对之后更新视图 一样的不变 不一样重新渲染
</script>
</html>
Diff算法
1.1、 diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。
如图所示:
1.2、比较只会在同层级进行, 不会跨层级比较。
比较后会出现四种情况:
1、此节点是否被移除 -> 添加新的节点
2、属性是否被改变 -> 旧属性改为新属性
3、文本内容被改变-> 旧内容改为新内容
4、节点要被整个替换 -> 结构完全不相同 移除整个替换
同级比较就是对比上方的数字,把不同的放入数组中,然后用patch函数进行比较渲染。
2、diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁