用于打补丁(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更高效