一、问题描述
A页面跳转到B页面,B页面操作完成后,设置返回A页面后刷新A页面(其实就是给A页面的组件添加BACK_REFRESH=true的属性)。当返回B页面时,会通过判断BACK_REFRESH==true,来调用定义在A页面的$refreshData函数进行页面数据刷新,最后再修改A页面组件的属性BACK_REFRESH=false。
但实际运行过程发现,在特殊情况下,在返回A页面后,会一直循环调用$refreshData方法,导致页面卡死。
二、代码走查
通过代码走查发现,在调用$refreshData方法时产生了异常,导致后面对A页面组件的属性BACK_REFRESH=false的操作无法执行,而这将导致A页面组件的render函数反复执行。为什么呢?看看下面的Vue的代码就知道了:
结论:
Vue在渲染组件的时候,调用render函数,如果遇到异常,会重新调用render函数。
解决方案
将页面组件的属性BACK_REFRESH=false操作前置于this.refresh方法调用。