Vue3组件属性的更新原理

godfly
420 阅读2分钟

示例

image.png

  • 我们现在想实现的就是更改组件的props实现组件的更新，按照之前文章的逻辑，我们只实现了组件的初始渲染，并没有实现更新逻辑

image.png

增加组件的更新逻辑

image.png

  • 当n1不存在，也就是不存在老的虚拟节点，会走组件的初始挂载逻辑
  • 否则就会走组件的更新逻辑

updateComponent方法

image.png

  • 属性的更新会导致页面的重新渲染
  • 拿到老的虚拟节点上的conponent组件实例进行复用
  • 拿到老的组件实例上的虚拟节点上的props和新的组件实例上的props
  • 进行属性的更新

updateProps方法

image.png

image.png

  • 我们看属性是否变化，从值的变化和属性的个数来判断属性是否有变化
  • 先比较属性个数是否发生变化
  • 然后比较属性值是否变化
  • 如果有属性变化，那么我们直接把新的属性直接覆盖老的实例上的属性
  • 判断属性是否被删除，如果在新的实例是没有某个属性，就删掉
  • 我再解释一下这个updateProps的参数，instance复用的老的虚拟dom上的组件实例，上面的props属性是组件内部接收的props属性，而prevProps和nextProps是外部传给组件的属性，先从两个维度比较组件外部传的props是否发生变化，如果变化了把新接收来的属性全部覆盖给组件内部props，但是这样覆盖，有可能覆盖多了，组件内部属性可能没完全接收，所以我们要同步删除组件内部没有接收的属性
  • 当组件内部接收的属性变化时，就会发生重新渲染，以为组件内部的props是浅响应式的
avatar
文章
阅读
粉丝