虚拟DOM & 深入响应式原理

虚拟DOM

• 为什么使用虚拟DOM 思考： 操作真实DOM所消耗的时间 和 操作数据所消耗的时间 ？ 在循环中操作真实DOM消耗的时间很长

• 深入Vue2.x的虚拟DOM diff原理
  虚拟DOM是在DOM的基础上在内存建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中
  patch对象，即补丁对象

• 模拟虚拟DOM
  1.获取数据
  var model = {
  msg: 'hello ’
  }
  2.创建VDOM对象
  var vdom = {
  tag: ‘DIV’,
  attr: {
  className: ‘box’
  },
  children: [
  {
  tag: ‘UL’,
  attr: {},
  children: [
  {
  tag: ‘LI’,
  attr: {},
  content: model.msg
  }
  ]
  }
  ]
  }
  3.渲染DOM
  var box = document.createElement(‘DIV’)
  var ul = document.createElement(‘UL’)
  var li = document.createElement(‘LI’)

box.className = vdom.attr.className
li.innerHTML = vdom.children[0].children[0].content

ul.appendChild(li)
box.appendChild(ul)
document.body.appendChild( box )
4.数据改变
model.msg = “hello 1905”
5.重新生成vDOM
vdom = {
tag: ‘DIV’,
attr: {
className: ‘box’
},
children: [
{
tag: ‘UL’,
attr: {},
children: [
{
tag: ‘li’,
attr: {},
content: model.msg
}
]
}
]
}
6.通过diff算法进行两个vdom的比较，将不同之处挑选出来，形成一个patch对象，即补丁对象，再去重新渲染

• diff算法
  diff算法来源于后端读懂diff
  这个算法来源于后端，它的作用就是比较两个文件，然后将两个文件中的不同之 处挑选出来，将挑选出来的内容