虚拟dom && diff算法 （ 王者 ）

1.虚拟dom是什么？
所谓的virtual dom，也就是虚拟节点.

2.vdom是什么?
它是一个Object对象模型，用来模拟真实dom节点的结构
需求： vdom如何模拟真实dom，如果将来我想在增加一个li，里的内容为 ： 这里是千锋教育
在增加10个li,内容为： xxx

案例:

• 这里是1903

  var list = document.querySelector( '.list' )
  var li = document.createElement( 'LI' )
  li.innerHTML = ' 这里是千锋教育 '

  list.appendChild( li )

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

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

2. 创建vdom
   /*

   
   

   • 
     
   • {{ data.name }}
   • 
     
   */

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对象
7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）
   4.diff算法是什么？
   1.diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
   2.diff算法来源后端
   3.前端将其应用于虚拟dom的diff算法
   4.vue中将 虚拟dom的diff算法放在了 patch.js文件中
   5.使用js来进行两个对象的比较（ vdom 对象模型）
   diff算法是同级比较
   给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）

diff算法运行结束之后，返回什么？
答: 返回一个key
注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom
深化： Vue vdom vs React vdom 有何不一样？
需求： 有一个变量 count 的初始值时 0，经过一系列运算，得到10001，然后将结果写入box中

var box = document.querySelector( ‘.box’ )

我们可能会这么写

var count = 0 ;

console.time( ‘a’ )
for( var i = 0 ; i < 10001 ; i++ ){
count ++
box.innerHTML = count
}
console.timeEnd( ‘a’ ) // a字符输出花费的时间

我们肯定会这么写
count = 0
console.time( ‘b’ )
for( var i = 0 ; i < 10001 ; i++ ){
count ++
}

box.innerHTML = count

console.timeEnd( ‘b’ )

对比以上 a b 输出花费的时间

从以上小实验得出一个结论

更少的dom操作会更加减少 时间花费 减少性能损耗

我们应该先 操作数据 再去操作dom

由以上结论慢慢的前端将一个 概念引入在 框架中 虚拟dom