首页天道酬勤虚拟dom的理解,vue什么是虚拟dom

虚拟dom的理解,vue什么是虚拟dom

张世龙 05-12 13:06 74次浏览

虚拟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计算。

vue什么是虚拟dom,virtualgame最新版