虚拟dom

原生dom,例如一个空的div，打印出它的key,会有很多很多的属性，然后操作dom元素就消耗很多的性能
但是如果用一个js对象去描述一个dom的元素是非常简单的 例如

{
tag: 'div',
data:{
  id:app
},
children:[
{
tag: 'p',
data:{
class: 'item'
},
children:['节点1']
}
]
}

所以虚拟DOM就是由于原生dom规则过于复杂，我们用js对象去描述一个dom,这个对象就是虚拟dom

vue的虚拟dom

update(render)函数
render函数主要做的事情就是把template模板转化为可执行的函数
render里面做的第一步是编译complie,把模板转化为ATS(抽象语法树) 可以理解为是一个描述dom的js对象
第二步是静态节点标记，没有指令 没有变量的节点 下次更新可直接跳过
第三步是生成，把ast对象生成可执行的函数

例如<div v-if="isShow">哈哈</div>
转化为ast后
{
  tag:'div',
props:{v-if:”isShow“}
children:[‘哈哈’]
}
再转化为render函数
with(this)(isShow)?_c(div)_v('哈哈'):''

update函数
判断之前有没有虚拟dom 没有就是第一次渲染
有的话做虚拟dom更新走patch方法
updateChildren是核心的对比
先对比老数组开头跟新数组开头的key是一样的，就只做属性的对比
然后游标+1，继续重新遍历
老开头新开头不一样 就对比老结束和新结束
或者老开头跟新结束
或者老结束或新开头这四种情况先对比
都不属于的话逐个遍历