浅谈Vue中的虚拟DOM

浅谈Vue中的虚拟DOM

1. 什么是虚拟DOM？
2. 使用虚拟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的渲染流程

1. 获取数据

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

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

4. 当数据发生改变后，又会生成新的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 )
     

5. diff算法是用来做什么的？

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

6. 列表渲染为什么要加key?

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

7. jsx 在vue采用的原因

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

8. render函数是做什么的

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