虚拟DOM的作用和定义什么是虚拟DOM
虚拟DOM是普通的js对象。 用于描述真实dom结构的js对象，因为不是真实dom，所以称为虚拟dom。
虚拟dom的作用
我们知道，如果传统dom数据发生更改，则必须继续操作dom才能更新dom数据。 虽然稍后出现了模板引擎，可以一次更新多个dom。 但是，模板引擎还没有跟踪状态的机制，即使引擎中的数据发生了变化，它也会操作dom来重新渲染整个引擎。 虚拟dom根据当前数据生成描述当前dom结构的虚拟dom，因此可以很好地跟踪当前dom的状态。 随后，如果数据发生更改，将生成新的虚拟dom，两个虚拟dom将保存更改前后的状态。 然后，通过diff算法，计算了当前两个虚拟dom之间的差异，得到了更好的替代方案。 vue中的虚拟dom目前虚拟dom库很多，常见的是snabbdom和virtual-dom。 vue以前使用virtual-dom，2.x以后使用snabbdom。 这里要说明的是snabbdom
snabbdom有四个核心方法
h函数patch函数patchVnode函数updateChildren函数h函数newvue({render:h=h(app )，} ).$mount ) ‘ #app ‘ )您可能见过此函数没错，h函数在render函数内执行。 了解vue生命周期，并知道在创建—– before mount期间将模板编译为render函数。 实际上，将模板编译为某种形式并放置在render函数中，render函数运行时将生成虚拟dom。 编译成什么格式？ 看看源代码的参数吧！
扩展函数(sel :字符串) : VNode； 扩展函数(sel : string，data: VNodeData | null ) : VNode； 扩展函数(sel : string，children: VNodeChildren ) : VNode； 扩展函数(sel : string，data: VNodeData | null，children: VNodeChildren ) : VNode； 扩展函数(sel : any，b？ any，c？ any ) : vnode { let data : vnode data={ }； let children: any； let text: any； let i: number； 因为定义了很多h函数，所以必须谈谈函数的重载！
函数重载：
函数重载是定义多个重复函数，并根据函数的参数数量和参数类型进行区分。 如果函数数量不同，参数类型不同，则在函数中执行的代码也不同。
当我们以第四个参数加入时：
第一个参数的sel表示dom选择器，例如div#app div id=“app”/div的第二个参数表示dom属性，{class:“xiaokang”、value:“今天上海多云！ ”}第三个参数表示子节点，子节点也可以是虚拟子节点或文本节点。 constvdom=h(div )、) class : (vdom )、(h ) p )、(class : (text )、(Helloword )、h ) input ) )。 ‘ () ) )而且，h函数中最重要的是执行了vnode函数，vnode函数的主要作用是将h函数传递的参数转换为js对象，即虚拟dom
虽然上面是一些判断语句，所以很少说明，但最后运行了生成js对象的代码。
导出功能节点(sel : string，data : any，children : array vnode ) elm : element (文本) 3360 vnode { const key=data===undefined？ 统一： data.key； return { sel，data，children，text，elm，key }； }总结：
首先，当代码首次运行并从create移动到beforeMount之间时，将编译模板以生成渲染器函数。 然后，render函数被执行后，h函数被调用，在h函数内调用vnode函数以生成虚拟dom，由于返回生成结果，因此虚拟dom首次被生成。 随后，当数据发生更改时，将重新编译以生成新的vnode。 然后比较新旧，进行diff计算。