Vue中的diff算法

用于打补丁（patch）

在Vue中，渲染真实dom是非常耗费性能的。

重绘就是css的颜色变化（字体颜色、背景颜色）或背景图片变化  ----repaint

重排就是dom节点的增删 宽高位置 display:none 或者是查询x轴到节点位置offsetLeft dom宽度 offsetWidth  --------reflow

重绘性能比重排好

如果直接渲染，就会渲染真实dom这棵数,就会引起重排或重绘。

想出的解决方案是映射。将数据映射到这棵树上面，最小化重排重构。

我们想要高效渲染页面，diff算法就应时而生。diff用于对比两个虚拟dom（visual dom）。  patch函数

它将两个真实dom（oldNode，node）提取一些重要的属性（className,id,父子引用等）模拟树状结构，得到visual Dom。

diff算法就是通过比较这两个虚拟dom，它只能同级比较 、不会跨级比较

类似于这种

const vNode = {
    tag:'div',
    children:[
        {tag:'p',text:'爱你'}
    ]
}

key的作用 设置key可以高效地更新虚拟dom 

vue中使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果   --------（这里在说动态组件 keep-alive key is ）

总结：不要跨层级修改dom

保持稳定的dom结构有助于性能的提升

设置key让diff更高效