- 虚拟DOM( VDOM ) 和 diff算法
总结： - 虚拟DOM 是什么？
虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构 - diff算法
diff算法是用来比较两个或是多个文件， 返回值是文件的不同点
diff算法是同级比较的
diff思维也是来自后端
diff算法的比较思维
比较后会出现四种情况：
1、此节点是否被移除 -> 添加新的节点
2、属性是否被改变 -> 旧属性改为新属性
3、文本内容被改变-> 旧内容改为新内容
4、节点要被整个替换 -> 结构完全不相同 移除整个替换 - 整个VDOM的使用流程（Vue）
- 创建VDOM树
- 利用render函数渲染页面
- 数据改变，生成新的vDOM
- 通过diff算法比较 新 旧 两个VDOM , 将不同的地方进行修改， 相同的地方就地复用 ， 最后在通过render函数渲染页面
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<header class="header"> 头部 </header>
<section class="content"> 内容 </section>
<footer> 底部 </footer>
<section> 内容 </section>
<footer> 底部 </footer>
</div>
</body>
<script>
var vdom = {
vnode: {
tag: 'div',
attr: {
idName: '#app'
},
content: [
{
tag: 'header',
content: [
'头部'
]
},
{
tag: 'section',
content: [
'内容'
]
},
{
tag: 'footer',
content: [
'底部'
]
}
]
}
}
function render(parentNode,vnode,id,className){
var app = document.createElement('DIV')
app.id = 'app'
parentNode.appendChild(app)
}
// render----------------
vdom.vnode.content[0].className = 'header'
vdom = {
vnode: {
tag: 'div',
attr: {
idName: '#app'
},
content: [
{
tag: 'header',
attr: {
className: 'header'
},
content: [
'头部'
]
},
{
tag: 'section',
content: [
'内容'
]
},
{
tag: 'footer',
content: [
'底部'
]
}
]
}
}
vdom.vnode.content[1].className = 'content'
vdom = {
vnode: {
tag: 'div',
attr: {
idName: '#app'
},
content: [
{
tag: 'header',
attr: {
className: 'header'
},
content: [
'头部'
]
},
{
tag: 'section',
content: [
'内容'
]
},
{
tag: 'footer',
content: [
'底部'
]
}
]
}
}
// 。。。 经过多次的VDOM操作之后
// 通过render函数进行渲染
// 通过diff算法， 将所有的vdom对比一边， 找出不同的地方， 然后进行render函数渲染
var obj = {
className: 'yyb'
}
var obj1 = {
className: 'yanyabing'
}
for ( var i in obj ){
if( obj1[i] ){
//如果有
if( obj[i] === obj1[i]){
// 值是一样的
}else{
// 值不一样
}
}else{
//没有属性
}
}
// 有的
</script>
</html>