虚拟dom && diff算法

vue2.0加入了virtual dom，有点向react靠拢的意思。vue的diff位于patch.js文件中，复杂度为O(n)。 了解diff过程，我们先从虚拟dom开始。

虚拟dom && diff算法

1.虚拟dom是什么？

所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点 dom diff 则是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染

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

1. 获取数据 （ ajax fetch）
2. 创建vdom
3. 通过render函数解析jsx，将其转换成 vdom结构
4. 将vdom渲染成真实dom
5. 数据更改了
6. 使用diff算法比对两次vdom,生成patch对象
7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

案例如下：

// 1.获取数据（ ajax   fetch ）
    var data = {
      id: 1,
      name: '1903'
    }

  // 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对象

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

    // 7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

3.什么是jxs?

javascript + xml

4. diff算法是什么？

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

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

补丁对象

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

6.验证 Key

• 列表循环一定要加key
• key最好是具有唯一性表示的 id

为什么列表循环要加key？

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

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

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

• :key是为vue的响应式渲染提供方法，在列表中单条数据改变的情况下，可以进行单独渲染，减少页面资源消耗。

以上是个人见解！