Vue中动态显示modal的优化写法

背景

在写后台管理系统的业务中，列表页常常会需要控制新增或编辑的弹窗显现，那一般弹窗都会以组件的方式引入到页面，如何去动态控制组件内的弹窗显现呢？实现虽然很简单，但是在这我用了另一种写法去控制弹窗展示，仅凭个人理解去实现，如果我的理解有误或者思路不对，请大家指出或者想听取大家更优的解决方案🙏 

下面的演示是基于 vue + ant-design-vue 实现

通过 v-if 控制弹窗组件 (不不不推荐)

• 在弹窗组件内让弹窗的visible改为true
• 由父组件通过v-if 控制弹窗组件的 显示

结果展示

 

存在的问题：由于v-if是惰性的，在初始值为false的时候，虽然不会加载组件的任何资源，但是在变化条件时，组件都会被重建，如果弹窗存在请求数据操作也会被多次重复请求，造成不必要的请求和资源浪费。

通过modal的visible控制 (大多做法)

• 使用ref引用弹窗组件实例
• 组件弹窗内提供展示和关闭方法控制visible给父组件调用

 结果展示

 存在的问题：弹窗组件虽然没有展示出来，但是实际组件已经加载了。如果我们有时候只是单纯的想看看列表页的数据，无疑访问列表页时会额外的去加载了组件资源以及额外的数据请求操作。

通过components动态加载弹窗组件(我觉得可推荐)

• 其实是在第二种方法上做的修改，子组件内部的写法和第二种完全相同
• 在父组件时，打开弹窗通过components的is属性赋值弹窗组件

 结果展示

优点：在没有展示弹窗时没有加载组件，弹窗展示后，关闭弹窗重新打开不会对组件进行重建

当然，存在多个组件弹窗的时候，也是可以用这种方法控制的，避免了页面一加载时初始化了所有的实例

 

以上只是个人对如何更好的控制弹窗的实现做的一些其他思考，如有更好的方法希望大家提出，一起学习，一起进步！

～～end～～