公司注册网站官网网络营销工程师

一、vue 中为什么需要虚拟DOM

1.1本概念
基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象，也就是现在大家所熟知的VNode 和VDOM

·Virtual DOM 就是用js 对象来描述真实 DOM，是对真实 DOM 的抽象，由于直接操作 DOM 性能低但是is 层的操作效率高，可以将 DOM 操作转化成对象操作，最终通过 diff 算法比对差异进行更新 DOM(减少了对真实DOM的操作)。
。虚拟DOM 不依赖真实平台环境从而也可以实现跨平台

二、VDOM 是如何生成的?

。在vue中我们常常会为组件编写模板-template
。这个模板会被编译器编译为渲染函数-render
。在接下来的挂载过程中会调用 render 函数，返回的对象就是虚拟 dom
。会在后续的 patch 过程中进一步转化为 真实dom。

三、VDOM 如何做 diff 的?

。挂载过程结束后，会记录第一次生成的 VDOM -oldVnode
当响应式数据发生变化时，将会引起组件重新 render，此时就会生成新的VDOM-newVnode。使用oldVnode 与newVnode 做 diff 操作，将更改的部分应到真实 DOM 上从而转换为最小量的 dom操作，高效更新视图。