3.vue为什么需要虚拟DOM?

525 阅读1分钟

1.概念

虚拟DOM就是一个js对象描述真实DOM,如果直接操作DOM的话,性能低但是js层的操作效率高,虚拟DOM是将操作转换为对象操作,最终通过diff算法对差异进行更新,减少对真实DOM的操作

2.如何生成

在vue里面经常使用template编写组件,这个模板会被编译器转换为渲染函数(render),在挂载的过程中调用render函数返回的对象就是虚拟dom,后续的patch过程中进一步转换为真实dom

3.diff算法

挂载结束后,会记录第一次生成的VDOM,也就是oldVnode

响应式数据发生变化时就会引起组件重新render,此时就会生成新的VDOM,也就是newVnode

比较oldVnode和newVnode,做diff操作,将更改的部分转换为真实DOM,从而实现最小量的DOM操作高效更新视图