如何让Vue的b-modal显隐时不重新渲染，保留在DOM中减少服务端请求

解决方案 #

BootstrapVue 的 <b-modal> 默认隐藏时会销毁内部的DOM结构，导致每次打开都重新渲染iframe、重复发起资源请求，要让弹窗内容永久保留在DOM中，只需给<b-modal>添加no-destroy-on-hide属性即可：

<div v-for="(item, key) in mapItems" :key="key">
    <b-modal :id="`map${key}`" no-destroy-on-hide>
        <iframe width="600" height="450" style="border:0" loading="lazy" allowfullscreen :src="mapSrc(item.mapUrl)"> </iframe>
    </b-modal>
</div>

补充说明 #

• 给v-for循环的根节点绑定:key，可以避免Vue列表渲染时出现节点复用异常。
• 如果mapItems数量较多，不想页面初始化时就加载所有iframe资源，可以同时添加lazy属性，实现首次打开modal时才渲染iframe，之后隐藏也不会销毁的效果，平衡首次加载速度和重复打开的请求消耗：

<b-modal :id="`map${key}`" no-destroy-on-hide lazy>

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