问题: 什么是虚拟DOM,我们为什么要用它,它与原生DOM有什么区别?
在浏览器的标准里面,DOM是非常复杂的,我们先写一段基本的代码来体现
<script>
let div = document.createElement('div')
let dif
for ( let key in div) {
dif += key + ' '
}
console.log(dif)
</script>
我们新建了一个空的div,并遍历它的属性打印到控制台。可以看到,这个空的div有如此多的属性。为什么它会有这么多的属性呢,DOM的标准设计就是这么设计的,整个DOM非常的复杂。这就是为什么我们稍微操作一些DOM,浏览器的性能就会急速下降。所以尽可能的少操作DOM,也是各个性能优化的重点。
其实我们HTML用js去描述其实是一个很简单的逻辑。我们写一段简单的HTML
<div id="app">
<p class="item">节点1</p>
</div>
根据我们上述说的,这段简单的HTML渲染完成之后会有太多太多的属性。我们用js去描述它:
function createElement() {
return {
tag: 'div',
data: {id: 'app'},
children: [{
tag: 'p',
data: {class: 'item'},
children: ['节点1']
}]
}
}
我们用很简单的对象来描述上面的DOM结构,这就是所谓的虚拟DOM。
也可以说,由于浏览器的标准过于复杂,我们用js对象去描述原生的DOM,这个对象我们就称之为虚拟DOM。
像在React,Vue他们会用到虚拟DOM,我们想到页面进行更新的时候,我们可以通过虚拟DOM进行对比,找出新旧节点间最少的修改。