Vue.js 如何避免模态框（modal）组件整体重渲染？

你遇到的模态框重复触发弹出动画的核心原因是b-modal组件被触发了重挂载，而非单纯的内容重渲染。只要b-modal的挂载状态不发生变化，仅内部内容更新不会触发入场动画。

方案1：固定模态框插槽的根节点（优先尝试，改造成本最低） #

当前你在b-modal的默认插槽内直接用v-if/v-else切换两个同级<p>标签，会导致插槽的根节点每次切换时被整体替换，部分UI库的模态框会监听插槽根节点变化，进而触发自身重挂载，重复播放动画。
只需要给内部内容加一个固定的外层容器，保证插槽的根节点永远不变即可：

<template>
  <div>
    <b-modal v-model="modalShow">
      <!-- 固定外层容器，插槽根节点永远不会被替换 -->
      <div class="modal-content-inner">
        <p v-if="firstPage">Hello</p>
        <p v-else>{{content}}</p>
      </div>
    </b-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalShow: false,
      }
    },
    computed: {
      content() {
        return this.$store.state.content
       },
     firstPage() {
        return this.$store.state.firstPage
      }
    }
  }
</script>

方案2：开启模态框预渲染配置 #

如果你使用的是BootstrapVue的b-modal组件，它默认会在模态框第一次打开时才渲染内部插槽内容，部分场景下内容切换会触发内部重新初始化逻辑。可以添加eager属性，让模态框内容在组件初始化时就完成渲染，后续仅更新内容即可：

<b-modal v-model="modalShow" eager>
  <div class="modal-content-inner">
    <p v-if="firstPage">Hello</p>
    <p v-else>{{content}}</p>
  </div>
</b-modal>

方案3：拆分独立模态框组件 #

如果以上方案都无效，说明b-modal所在的父组件在firstPage变化时被整体重渲染，导致b-modal被连带重挂载。可以将整个模态框抽离为独立组件，内部仅通过props或Vuex获取内容数据，独立组件不受父组件无关状态变化的影响，就不会触发重挂载。

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