1、什么是虚拟DOM
本质:用JS对象的形式,来模拟页面上DOM嵌套的关系;(虚拟DOM是以JS对象的形式存在的)
目的:就是为了实现页面元素的高效更新。
<!--旧DOM-->
<div id="mydiv" title="说实话" data-index="0">
彬哥好帅
<p>哈哈哈</p>
</div>
<!--新DOM-->
<div id="mydiv" title="说实话123" data-index="0">
彬哥好帅
<p>哈哈哈qqq</p>
</div>
用JS对象的形式如下图:
2、Diff算法
- tree diff:新旧两颗DOM树,逐层对比的过程,就是Tree Diff;当整棵DOM 逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
- component diff:在进行Tree Diff的时候,每一层中,组件级别的对比,叫做Component Diff;
(1) 如果对比前后,组件类型相同,则暂时认为此组件不需要被更新
(2)如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上; - element diff :在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比。