首页天道酬勤vue什么是虚拟dom,virtualgame最新版

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

张世龙 05-12 13:05 109次浏览

我一直在想,写博客是为了什么? 有一天,我想了解:思维、表达和交友。

: vdom是什么? 为什么存在? 用js模拟dom结构。 dom变化的对比放在js层进行。 提高重做性能的js是图灵完全语言,是能够实现各种逻辑和算法的语言。

存在的理由:

dom操作是一个非常昂贵的js运行效率非常高的渲染案例:它在jquery上操作dom

var$idBTN=$('.id-BTN ' ); functionrender(data ) var$container=$ ) ).container ); $container.html (' ) var$table=$ ) table ) ($table.append ) $ ) (trtd姓名/tdtd年龄/tdtd地区/td/tr ) )数据tdtd $ { item.age }/tdtd $ { item.add }/TD/tr ` } $ container.append ($ table ) $idbtn.click ) )函数er vue和vdom是借用snabbdom实现的。

github :https://github.com/snabbdom/snabbdom

介绍snabbdom的简单使用方法

引入snabbdom的js文件初始化snabbdom的patch和h函数以创建虚拟vdom,然后首次将vdom呈现到页面以创建新的vdom。 newVdom然后将newVdom与vdom进行比较,仅将上次修改的dom代码更改如下:

bodydivclass=' container '/div buttontype=' button ' name=' button ' class=' BTN ' change/buttonscriptsrc=' https://scriptscriptsrc=' https://cdn.boot CSS.com/snabbdom/0.7.2/snabbdom-class.js '/script snabbdom-event lilies scriptscriptsrc=' https://cdn.boot CSS.com/snabbdom/0.7.2/snabbdom-props.js snabbdom/0.7.2/snabbdom-ssom snabbdom/0.7.2/h.js scriptscriptvarcontainer=document.query selector '.container ' ) var BTN=document.query sery var patch=snabbdom.init ([ snabbdom _ class,snabbdom_props,snabbdom_style, snabbdom_eventlisteners ] ) varh [h(Li.item )、)、(ITEM1)、h (Li.item )、()、(ITEM2) ] ) patch ) containenem 2 1、什么是diff算法? diff算法用于比较两个文件之间的差异,是linux和基础命令。

2、Vdom为什么要使用diff算法? dom操作昂贵,通过查找这次修改的dom,其他节点不动就找到的过程是diff算法3、diff算法的核心过程吗? 如何在vnode中生成dom的节点? patch方法patch(container,vnode ) patch ) vnode,newVnode ) vnode与newVnode的比较已修改的dom节点replacechildrencreateElement

虚拟dom实现原理及优缺点,虚拟dom为什么快