Vue3中v-show在多实例场景下失效问题排查求助

你的核心问题在于Vue 3的不同应用实例之间响应式数据完全隔离：你创建的nav、defaultApp、bootstrapApp、vueApp是四个独立的Vue实例，每个实例的响应式系统只对自身内部的数据变更生效。虽然你通过defaultApp.$data.isShow修改了其他实例的变量值，但这种外部修改不会被对应实例的响应式系统追踪，自然不会触发v-show的视图更新，导致内容始终显示。

方案1：修正多实例写法（符合你的初始需求） #

如果坚持要用多实例，需要在修改其他实例的isShow后，手动调用实例的$forceUpdate()方法强制更新视图：

// 以showDefault方法为例，其他方法同理修改
showDefault: function() {
  console.log("showDefault()");
  defaultApp.$data.isShow = true;
  bootstrapApp.$data.isShow = false;
  vueApp.$data.isShow = false;
  // 强制每个实例更新视图
  defaultApp.$forceUpdate();
  bootstrapApp.$forceUpdate();
  vueApp.$forceUpdate();
}

方案2：使用单Vue实例（推荐，Vue常规用法） #

Vue项目几乎都是基于单根实例开发的，这样数据和视图绑定更自然，也避免了多实例的隔离问题。修改后的代码逻辑更清晰，也符合Vue的设计理念：

<!DOCTYPE html>
<html>
<head>
  <title>Learning web framworks</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
        rel="stylesheet" 
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
        crossorigin="anonymous"/>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark">
      <div class="container-fluid">
        <a @click.prevent="showPage('default')" class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a @click.prevent="showPage('bootstrap')" class="nav-link" href="#">Bootstrap</a>
          </li>
          <li class="nav-item">
            <a @click.prevent="showPage('vue')" class="nav-link" href="#">Vue.js</a>
          </li>
        </ul>
      </div>
    </nav>
    <div v-show="activePage === 'default'">
      <p>default content</p>
    </div>
    <div v-show="activePage === 'bootstrap'">
      <p>bootstrap content</p>
    </div>
    <div v-show="activePage === 'vue'">
      <p>vue content</p>
    </div>
  </div>

  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
    crossorigin="anonymous"></script>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          activePage: 'default' // 默认显示default页面
        }
      },
      methods: {
        showPage(pageName) {
          console.log(`show ${pageName} page`);
          this.activePage = pageName;
        }
      },
      watch: {
        activePage(val, oldVal) {
          console.log(`active page changed: ${oldVal} -> ${val}`);
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

方案说明 #

• 单实例写法用activePage变量统一控制当前显示的页面，v-show通过判断该变量值来决定是否显示对应内容，修改activePage会自动触发视图更新，完全符合Vue的响应式机制。
• 多实例方式在Vue中极少使用，会导致逻辑分散、数据隔离，维护成本更高，仅适用于完全独立的组件需要挂载到页面不同位置的场景。

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