1.JS频繁操作DOM带来的问题:
在传统的开发模式当时,通过JS来操作DOM的成本非常的高,频繁的操作,会影响页面卡顿,并且还会因为硬件性能较低,出现页面假死状态,造成不好的用户体验。
2.虚拟DOM的概念很好的解决了这个问题:
Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个DOM节点发生了变化。
虚拟DOM就是为了浏览器性能而设计出来的,虚拟DOM就像是,真实的DOM复制出来一个js对象,用js对象来模拟DOM,所有要操作的DOM变化,都是先通过改变js对象,操作内存当中的js显然是要比操作DOM要快,等到所有要操作的内容都在js对象中结束,等到对象更新完成,最后将js对象,映射陈真实的DOM中,交给浏览器去渲染,这样做,有效的降低了DOM的渲染次数。(Vue中有一个虚拟dom,其实虚拟dom就是一个内部的json字符串)
3.Vue diff算法
然后会有diff算法对比 两个虚拟DOM对象然后把新旧js对象 传入patch方法,diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁(diff可是逐层比较的,如果第一层不一样那么就不会继续深入比较第二层了)