大愚乌托邦

有时候遇到bug，时间上来不及找到bug出现的原因，这时候从数据驱动的角度出发，也许能另辟蹊径。

今天在项目中使用element-plus的el-dialog组件时遇到一个奇怪的问题：同一个对话框打开第二次之后就无法关闭了。没有任何报错，检查v-model的绑定值变化也是正常的，这就很奇怪了。

按照惯例，使用这种开源组件库，尤其是element-plus的版本还没稳定下来的，先到issue里搜一搜，看看有没有人踩过坑的。结果发现一个描述接近的issue，但是因为复现步骤描述不够详细，还没解决就被关闭了，翻issue这条路走不通。

重新梳理一下遇到这种与预期不符的问题的解决思路：

• 80%的情况是自己的业务代码逻辑出错了，好好检查变量传递、方法触发、边界情况等问题——已排除；
• 看看官方库的issue——已排除；
• 根据报错信息定位源码，测试看看——无报错；

一般情况下上面的三条思路能够解决绝大部分开发过程中的bug，但这次不行，这时候还有另一条思路。鉴于vue的设计思想是数据驱动，因此所有的异常都能在数据中找到蛛丝马迹。

话不多说，打开vue-devtool，选中出现异常的el-dialog组件，复现出错步骤，仔细观察，不难发现：

• el-dialog组件中：
  • props中的modelValue（Boolean）
  • setup中Ref变量rendered（Boolean）
  • setup中Ref变量visible（Boolean）
  • setup中Ref变量zIndex(数值每次打开时变大)

正常情况下，这四个变量会跟随每次dialog的显隐发生变化，其中前三个Boolean类型变量与dialog的显隐状态保持一致，最后一个会递增；

当错误发生时，第二个变量（setup中Ref变量rendered）在dialog关闭后没有由true转false，问题可能出现在这里，于是在对应的调用处用ref引用el-dialog组件，在每次关闭对话框时手动将ref.rendered置否，测试通过，问题解决~

总结

出错的真正原因其实并没有找到，只能算是找到了症状，严格意义上讲问题并没有解决，但是和很多生物医学领域的作法一样，能找到症状就能先治病，人救下来是最重要的。

后续还要跟进官方库的进度，看看后续版本还有没有类似问题，不排除时间充裕了再翻翻源码看看造成这个的真正原因是什么。

赏 支付宝扫码打赏 微信打赏