浅谈vue之虚拟dom以及Diff算法

一、虚拟dom的优缺点

优点:

dom具有批处理和高效率的Diff算法,最终表现在只是修改真实dom变更部分,可以保证高效的渲染,提高渲染性能

缺点:

首次渲染大量dom时,会多一层虚拟dom计算,会比innerHTML计算慢一点

二、制作虚拟dom的流程

1.内存中生成一棵虚拟dom树
image.png
2.将内存中的虚拟dom初始化其真实的dom
3.当我们修改vue实例中的data数据时候
image.png
4.将之前的虚拟dom结合新的数据,生成一条新的虚拟dom树
image.png
5.将此次生成好的虚拟dom树与上一次虚拟dom进行对比,通过diff算法进行对比的
6.将对比出来的差异的部分进行重新的真实dom的渲染
具体流程绘制图
image.png

三、什么是diff算法

在Diff算法中,只平层的比较前后两棵虚拟DOM树的节点,没有进行深度的遍历。
更深入请点击以下链接
https://www.cnblogs.com/wind-lanyan/p/9061684.html

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容