说说Vue中的虚拟Dom和diff算法

说说Vue中的虚拟Dom和diff算法

一、什么是虚拟Dom？

1. 虚拟Dom即vdom，它是一个Object对象模型，用来模拟真实的Dom节点的结构。

2. //这里写个需求，看vdom如何模拟真实dom：如果这里我想写这样一个结构：
    <div class = "box">
           <ul>
             <li> 人间天堂 </li>
           </ul>
    </div>
   //用虚拟Dom来创建：
   //1：获取数据
   var data = {//ajax    fetch
         id: 1,
         name: '人间天堂'
       }
   
   // 2. 创建vdom（这里是jsx语法,本来是要写成3的Vdom对象模式的）
   // 我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型太大了，也太长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript + xml  搞出了一个新的语法糖  jsx ，用jsx来模拟vdom。（但是下面的jsx结构又不符合vdom对象结构的要求，所以还是要转换成vdom，如3）
   	<div class = "box">
            <ul>
                 <li> {{ data.name }} </li>
            </ul>
        </div>
   
    // 3. 通过render函数解析jsx，将其转换成  vdom结构(用一个对象去模拟那个结构)
       var vdom = {
         tag: 'div',
         attr: {
           className: 'box'
         },
         content: [
           {
             tag: 'ul',
             content: [
               {
                 tag: 'li',
                 content: data.name
               }
             ]
           }
         ]
       }        
     //4. 将vdom渲染成真实dom(再次使用render函数)
     //5.当数据更改了，要再次生成vdom，
     //6.这里使用diff算法比对两次vdom后,（返回）生成patch对象，将改变之处用这个补丁对象修改掉（根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ），- key最好是使用具有唯一标识性的  id  ，这也是列表循环为何要加—key的原因）
      /*  
         diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch） 
         diff算法来源后端
         前端将其应用于虚拟dom的diff算法
         vue中将 虚拟dom的diff算法放在了   patch.js文件中 
           使用js来进行两个对象的比较（ vdom 对象模型）
         diff算法是同级比较
           给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key  ）
        */
     //7.改完之后再用render函数，将vdom渲染成真实dom。