一次Vue渲染死循环问题的排查

一、问题描述

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方法调用。