Vue SPA中将所有模态框封装为独立组件是否存在内存及性能优势？

内存与性能层面的直接收益 #

• 减少无效实例与DOM占用：原先父页面维护17个模态框时，若使用v-show控制显隐，所有模态框的DOM节点、组件实例会在父页面初始化时全部创建并常驻内存；即使用v-if，也需要在父组件模板内声明所有模态框的结构，占用父组件的编译与渲染资源。
  统一封装后，结合BootstrapVue模态框的destroyOnHide配置，可实现仅在调用this.$bvModal.show('some-id-of-some-modal')时才初始化对应模态的实例与DOM，关闭后自动销毁，模态未唤起时完全不占用内存，复杂模态（含表单、图表等重组件）的内存优化效果尤其明显。
• 降低父组件渲染开销：原先父组件需要维护17个模态框的显隐状态、传参属性，每次父组件重渲染时，所有模态框都需要参与VNode diff计算。统一封装后父组件无需维护任何模态相关的响应式状态与模板声明，diff时完全跳过模态相关逻辑，父组件本身的渲染效率会有明显提升。
• 减少重复逻辑开销：模态框通用的遮罩控制、动画逻辑、关闭回调、键盘监听等逻辑都可以收拢到公共组件内实现，不需要每个模态重复实现，运行时不会生成重复的函数实例与事件监听，进一步降低内存占用。

可拓展的性能优化点 #

• 对于逻辑复杂、使用频率低的模态框，可在公共组件内用异步组件引入，将对应模态的代码拆分为独立chunk，仅在用户第一次唤起时加载，有效降低首屏JS体积，提升首屏加载速度。
• 纯文本类的轻量模态框无需单独封装组件，直接调用BootstrapVue内置的消息框API生成即可，比你计划的<MyModalComponent :text="someText" :modal-id="someModalId"/>封装更轻量化。

注意规避性能负优化 #

• 不要在公共组件内用v-show一次性挂载所有模态框，否则相当于把父页面的内存占用转移到公共组件，没有任何收益，一定要配置模态关闭后销毁的逻辑。
• 模态间传参优先通过$bvModal.show的第二个参数传递，不要额外声明全局响应式状态存储模态参数，避免产生无用的响应式监听开销。

内容的提问来源于stack exchange，提问作者Eric