1、场景描述

经常会遇到这类场景，一个设置页需要弹出一个编辑数据的弹窗。弹窗需要请求一些数据，且有如下要求：

1、请求数据可缓存：其数据多数是不变的，不需要每次打开弹窗都需要请求，需要缓存下来。

2、预处理可配置：数据有时候希望能在进入页面时预请求，有时希望用到时再请求。

3、与父组件解耦：数据请求的逻辑希望写在弹窗内部，不希望与父组件耦合。

4、与子组件挂载逻辑解耦：写在子组件created等钩子内又过于依赖弹窗组件在父组件中的挂载，父组件移除/挂载子组件的时候还需考虑接口的逻辑。若子组件内部还存在孙组件，还需按子组件的设置内容控制显/隐和挂载与否的，则更加复杂。

比如服务报告的设置页:

2、实现方案

对于上述的描述可以这样处理

1、子组件暴露出接口请求的方法，是否做缓存由该方法内是否存储接口请求的promise控制

2、在进入设置页面的时候，在页面组件中触发暴露的方法，并在页面销毁时做清理

这样就可以做到:

1、与父组件解耦：接口请求逻辑内聚在子组件中，不与父组件耦合。

2、与挂载逻辑解耦：不管子组件嵌套多深，只要想做预加载，就只需要把请求方法在页面组件内注册即可。不需要考虑如何挂载子组件问题。

3、预加载与缓存可控制：不想做预加载就不在页面组件内注册；不想缓存就只需要在请求方法内把缓存逻辑去除。