Vue3的一次render函数多次执行问题排查

834 阅读1分钟

问题描述

formItem的required属性变化时,重复执行了多次render函数,按照常识来说,required变化后render只应该执行一次才对,另外一个formItem的required变化,导致所有的formItems都触发了render,且有些formItem重复N多次render

原因猜想:

有可能是render有多个依赖,且required的变化导致了多个依赖都发生了变化,然后触发render多次执行;或者render函数内部触发了自身依赖的变化,导致render重复执行

寻找原因:

首先找到render函数的的依赖,最直接的就是required属性,然后有antv的validateInfos相关属性,经过各种注释,发现确实是因为required的变化导致validateInfos发生变化,多个依赖发生变化导致render多次执行,且render内部也对rules进行了更改,导致validateInfos发生变化

思路:

render函数内部最好不要修改自身依赖的相关属性,容易导致死循环

解决办法:

将render函数内部根据required属性自动生成rules的规则移到外部,避免不可控情况发生