任务二、Vue.js源码剖析-虚拟DOM

93 阅读1分钟

课程回顾

image.png

什么是虚拟DOM

image.png

为什么要使用虚拟DOM

image.png

给DOM节点加Key可以让节点重用,避免大量重绘

Vue的h函数

image.png h函数的返回对象,是一个VNode节点

VNode

image.png

CreateElement

image.png

patchVnode

作用是对比新旧Vnode找到差异,更新到真实Dome

image.png

updateChildren

  在patchVnode中,当新老节点都有子节点时候,并且子节点是cnVnode的时候,会调用updateChildren。
  updateChildren作用是对比新老子节点,找到这些子节点的差异,更新到Dome树,如果该节点没有变化,
会重用该节点

image.png

Key的作用

设置key的情况比不设置key的情况要少很多。设置key,如果内容没有改变,只会重用当前Dom不会更新Dom,
而不设置key,不管内容是否改变都会更新Dom