Vue.js：页面闪烁的解决思路以及相关问题回顾

这次修改bug看起来很简单，但是自己一开始的思路不够清晰，对于vue的理解页不够深刻，总共改了三次，需要记录以及反思。

项目结构：一个母组件下包含两个子组件

需要解决的问题：在product组件中，输入错误的产品ID之后，内容还会加载一遍，出现页面闪烁的问题。

本着修改量越少越好的思路，第一次的时候只修改product组件。发现由于母组件的渲染是依赖于子组件的数据，所以必须在子组件加载完成后才能获得相关的数据，这导致了子组件必然会出现闪烁的情况。

第二次的思路是将页面整体隐藏，待加载完成后再显示。但是由于这个方案将loading以及error状态进行了耦合，会出现诡异的情况：页面内容为空。所以也无法成功。

第三次的思路考虑到了两点：
1.    loading以及error状态的去耦合
2.    error 参数以及返回的error message参数只是再当前组件下被使用，所以需要用父子组件传参的情况下进行使用。这要求将主API（'/product/getDetail'）迁移到母组件中。在迁移的过程中，需要注意再接口完成后加上loading Success为true的参数，以及适配globalVar。母组件的接口布局也要进行修改：分为正常内容组件以及报错内容组件，如图：

总结：母组件所用到的数据需要通过props传送到子组件，母组件对于数据的loading以及error状态应该有控制权。