什么是虚拟dom

虚拟dom就是一个特殊的对象。

Vue之所以运行高效，因为采用了虚拟dom，减少了对真实的dom操作。

一、dom和虚拟dom对比

//dom
<ul id='test'>
   <p class='hehe'>这里是p标签</p>
</ul>
//对应的虚拟dom对象
let vdom={
    tag:'ul',
    attr:{
       id:'test'
    },
    content:[
       {
           tag:'p',
           attr:{
               class:'hehe'
           },
           content:'这里是p标签'
       }
    ]
}
//将虚拟dom转为真实dom基本操作：
let ul=document.createElement(vdom.tag);
ul.id=test;
let p=document.createElement(vdom.content.tag);
ul.p.class=hehe;
//再通过append方法添加...等操作

二、dom操作和虚拟dom操作耗时对比：

let num=0
console.time('test')
// 方式一：平均 60ms   80ms
for (var i = 0; i < 10000; i++) {
let tmp=Number(document.getElementById('test').innerHTML)
document.getElementById('test').innerHTML=tmp+1
}
console.timeEnd('test');

//方式二：平均 1ms   0.6ms
//let num=0
//console.time('test')
// for (var i = 0; i < 10000; i++) {
//    num++
// }
// document.getElementById('test').innerHTML=num
// console.timeEnd('test');

三、虚拟dom实现过程：

<!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>