虚拟DOM和deff算法

虚拟dom && diff算法

1. 虚拟dom是什么？
   它是一个Object对象模型，用来模拟真实dom节点的结构

2. 虚拟dom的使用基本流程
   1.获取数据（ ajax fetch ）

   var data = {
         id: 1,
         name: '毛毛'
       }
   

   2. 创建vdom

       /*   <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. 数据更改了， data.name = ‘贝贝’

      ​

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

   6. 使用diff算法比对两次vdom,生成patch对象

3. 什么是jsx?

   1. jsx javascript + xml

4. diff算法是什么？

   • diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）

   • diff算法来源后端

   • 前端将其应用于虚拟dom的diff算法

   • vue中将 虚拟dom的diff算法放在了 patch.js文件中

   • 使用js来进行两个对象的比较（ vdom 对象模型）

   • diff算法是同级比较

   • 给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）

5. diff算法运行结束之后，返回什么？

   • 返回一个补丁对象

注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom

深化： Vue vdom vs React vdom 有何不一样？

6. 验证 key

• 列表循环一定加key
• key最好是使用具有唯一标识性的 id

7. 为什么列表循环要加key ?

   1. vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id index等，因为vue组件高度复用

   2. 增加Key可以标识组件的唯一性，为了更好地区别各个组件

   3. key的作用主要是为了高效的更新虚拟DOM