虚拟dom && diff算法

虚拟dom && diff算法

1. 虚拟dom是什么？

   • 所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。

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

2. 虚拟dom的使用基本流程。

   • 获取数据（ ajax fetch ）

        eg: var data={
                  }
     

   • 创建vdom
     - html结构

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

   • 将vdom渲染成真实dom (render函数)

   • 数据更改后,创建一个新的Vdom

     • 然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

   • 使用diff算法比对两次vdom,生成patch对象（diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁(patch)。）

3. diff算法是什么？

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

4. DOM diff:(https://blog.csdn.net/kameleon2013/article/details/89218685 图片转载)

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

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

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

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