虚拟dom && diff算法

虚拟dom

概念：虚拟dom是一个Object对象模型，用来模拟真实dom节点的结构

虚拟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 = 'xxx'

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

• 6-使用diff算法比对两次vdom,生成patch对象
• 7-根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

diff算法

概念：diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch） 。
diff算法来源后端， 前端将其应用于虚拟dom的diff算法，vue中将 虚拟dom的diff算法放在了 patch.js文件中，使用js来进行两个对象的比较（ vdom 对象模型）。
diff算法是同级比较，给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）。
diff算法运行结束之后，返回一个patch对象。
注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom