虚拟dom && diff算法

虚拟dom && diff算法

1. 虚拟dom是什么？
   它是一个Object对象模型，用来模拟真实dom节点的结构
   需求： vdom如何模拟真实dom，如果将来我想在增加一个li，里的内容为 ： 这里是darcy的CSND
   在增加10个li,内容为： xxx

              <div class = "box">
                <ul class="list">
                  <li>darcy</li>
                </ul>
              </div>
              var list = document.querySelector( '.list' )
              var li = document.createElement( 'LI' )
              li.innerHTML = '这里是darcy的CSND'
   
              list.appendChild( li )
        ````
   

2. 虚拟dom的使用基本流程
   1).获取数据

      var data = {
       id: 1,
       name: 'darcy‘
   }
   

   2).创建vdom

    var vdom = {
       tag: 'div',
       attr: {
           className: 'box'
       },
       content: [{
           tag: 'ul',
           content: [{
               tag: 'li',
               content: data.name
           }]
       }]
   }
   
   

   3). 初次渲染 vdom( vdom渲染成 真实dom )

   var div = document.createElement('DIV')
   div.className = 'box'
   var ul = document.createElement('UL')
   var li = document.createElement('LI')
   

   vue中使用的是一个叫做jsx语法 + render函数

   render 函数进行渲染

   但是网页结构一般都是很复杂的，这时使用vdom去模拟dom结构，发现vdom这个对象模型
   太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript + xml 搞出了一个新的语法糖 jsx ，用jsx来模拟vdom

   <div class = "box">
          <ul>
            <li> {{ data.name }} </li>
          </ul>
        </div>

4).通过render函数解析jsx，将其转换成 vdom结构

 var vdom = {
   tag: 'div',
   attr: {
     className: 'box'
   },
   content: [
     {
       tag: 'ul',
       content: [
         {
           tag: 'li',
           content: data.name
         }
       ]
     }
   ]
 }     

5). 将vdom渲染成真实dom
render函数

3. diff算法是什么？
   diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
   diff算法来源后端
   前端将其应用于虚拟dom的diff算法
   vue中将 虚拟dom的diff算法放在了 patch.js文件中
   使用js来进行两个对象的比较（ vdom 对象模型）
   diff算法是同级比较
   给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）

4. diff算法运行结束之后，返回什么？
   生成一个补丁对象（patch）
   注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom