浅谈Vue中的虚拟DOM

浅谈Vue中的虚拟DOM

什么是虚拟DOM？使用虚拟DOM有什么好处？

虚拟dom

案例： 来说明为什么 virtual dom 是好用的 我有一个数 0 ，我希望这个数自增到 10001 ， 然后让这个数据输出到页面中？ var box = document.querySelector( '.box' ) ; var count = 0 ; // console.time( 'a' ) // for( var i = 1 ; i < 10002; i++ ){ // count = i // box.innerHTML = count // } // console.timeEnd( 'a' ) var num = 0 console.time( 'b' ) for ( var i = 0 ; i < 10002 ; i ++ ){ num = i } box.innerHTML = num console.timeEnd( 'b' )

可以看出：

越多的真实dom操作，越损耗性能操作数据要大大的减少性能损耗，提高渲染效率 能不能 创建以个树形结构( 对象表示 )来表示一个DOM结构呢？ –> 虚拟DOM

VDOM的渲染流程

获取数据

根据数据创建VDOM （相当于给对象赋值）

根据VDOM渲染生成真实DOM ( 根据createElmeent(‘DIV’) )

当数据发生改变后，又会生成新的VDOM

举例：var vdom1 = { tag: 'DIV', attr: { className: 'box' }, children: [ { tag: 'UI', children: [ { tag: 'LI', content: '1', attr: { className: 'item' } }, { tag: 'LI', content: '1', attr: { className: 'item' } }, { tag: 'LI', content: '1', attr: { className: 'item' } } ] } ] } var div = document.createElement('DIV') div.className = 'box' document.body.appendChild( div )

diff算法是用来做什么的？

通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’

列表渲染为什么要加key?

为了区分在虚拟dom中相同的元素，避免影响渲染

jsx 在vue采用的原因

VDOM对象树态繁琐了， 如果能像hom结构一样书写就好了， 这就引入了 jsx

render函数是做什么的

但是jsx始终还是不能直接去用的，必须转换成 对象 才能使用， vue中 使用render 函数 解析jsx语法， 然后换成 对象结构 ，在通过 createElment 生成节点，渲染成 真实DOM