首页天道酬勤虚拟dom的理解,虚拟dom结构

虚拟dom的理解,虚拟dom结构

张世龙 05-12 13:02 45次浏览

虚拟dom是一个特殊的对象。

Vue之所以能高效运行,是因为采用了虚拟dom,减少了实际的dom操作。

一、dom和虚拟dom对比

//domul id='test'p class='hehe '其中对应于p标签/p/ul//的虚拟dom对象let vdom={ tag:'ul,attr 3360 { id : } 内容: '此处为p标签' } ]}//将虚拟dom转换为实际dom的基本操作: letul=document.createelement (vdom.TTT ul.id=test; letp=document.createelement (vdom.content.tag ); ul.p.class=hehe; //再用append方法添加.等操作输入二、dom操作和虚拟dom操作耗时对比:

letnum=0console.time(test ) ) /方式1 :平均60ms80msfor ) varI=0; i 10000; I ) lettmp=number (document.getelementbyid (test ).innerHTML ) document.getelementbyid (test ) ) innerhtml.geter i 10000; I ) (/num(/)/document.getelementbyid('test ).innerhtml=num//console.timeend ) ) test );三、虚拟dom实现过程:

! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title虚拟DOM/title/headbodyspanid=' test '/spanulid=' test 特殊对象(可以通过一些处理生成实际dom ) letVDOM=(tag:(ul )、attr : (id : ) test )、content : (tag 3360 ) p )、 { tag:'li ',content:1}}/2 .进行编译分析的let vdom={ tag:'ul ',attr 3360 { id 3360 } content : [ { tag 33: } content: '此处为p标签' }、{tag:'Li ',content:2 } ]}//3.如果将虚拟dom设置为真实dom,则装载//4 .如果数据发生变化,则为新的虚拟DOM let vom attr:{ id:'test' },content attr : { class 3360 ' hehe ' },content: '此处为p标签' },{ tag 3: ' Li ',cohe content:2 } ]}//5、修改数据更改后的虚拟dom和上一个虚拟dom (按算法匹配//6,重新渲染/script/html,匹配后更新视图)

数据库默认端口号及修改方法,mysql指定端口连接