一、什么是虚拟DOM
虚拟dom可以简单的用一句话概括,就是用普通的js对象来描述DO/M结构,因为不是真实DOM,所以称之为虚拟DOM。
虚拟dom是相对于浏览器所渲染出来的真实dom而言的,在react,vue等技术出现之前,我们要改变页面展示的内容,只能通过遍历查询dom树的方式,找到需要修改的dom,然后修改样式行为或者结构,来达到更新视图的目的。
为什么要用虚拟DOM来描述真实的DOM呢?
创建真实DOM成本比较高,如果用 js对象来描述一个dom节点,成本比较低,另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。
二、 diff算法
diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ,新的虚拟dom和旧的虚拟dom进行对比,这个对比的过程就是diff算法,会找到不同地方,只去渲染不同的地方
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。
其有两个特点:
比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中,循环从两边向中间比较 diff 算法的在很多场景下都有应用,
在 vue 中,作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较
如图所示: