在 Vue 3 多实例场景下，v-show 必须绑定在 Vue 实例接管的内部元素上，而非挂载点（如 #default-content）本身；否则指令不会生效，导致元素始终可见。
在 vue 3 多实例场景下，`v-show` 必须绑定在 vue 实例接管的内部元素上，而非挂载点（如 `#default-content`）本身；否则指令不会生效，导致元素始终可见。
当你使用 createApp().mount('#some-id') 创建多个独立 Vue 应用实例时，v-show 指令仅对当前应用实例所管理的 DOM 子树生效。而你最初将 v-show="isShow" 直接写在了挂载容器 <div id="default-content" v-show="isShow"> 上——这个 <div> 实际是 外部静态容器，不属于 Vue 实例的响应式模板范围。Vue 实例只从其内部第一个子节点（即 <p>）开始编译和响应式接管，因此 v-show 在根挂载元素上被忽略，所有内容始终显示。
✅ 正确做法：将 v-show 移至 Vue 实例实际渲染的内部元素上，例如 <p v-show="isShow"> 或包裹一层 <div v-show="isShow"> 作为真正的响应式容器：
<!-- ✅ 正确：v-show 作用于 Vue 实例内联模板中的元素 --> <div id="default-content"> <p v-show="isShow">default content</p> </div> <div id="bootstrap-content"> <p v-show="isShow">bootstrap content</p> </div> <div id="vue-content"> <p v-show="isShow">vue content</p> </div>
同时确保各子应用正确初始化状态，并通过父级导航组件统一控制：
// 各子应用仅管理自身状态，不操作 DOM 容器
const defaultApp = createApp({
data() {
return { isShow: true };
}
}).mount('#default-content');
const bootstrapApp = createApp({
data() {
return { isShow: false };
}
}).mount('#bootstrap-content');
const vueApp = createApp({
data() {
return { isShow: false };
}
}).mount('#vue-content');
// 导航应用负责状态同步
const nav = createApp({
methods: {
showDefault() {
defaultApp.$data.isShow = true;
bootstrapApp.$data.isShow = false;
vueApp.$data.isShow = false;
},
showBootstrap() {
defaultApp.$data.isShow = false;
bootstrapApp.$data.isShow = true;
vueApp.$data.isShow = false;
},
showVue() {
defaultApp.$data.isShow = false;
bootstrapApp.$data.isShow = false;
vueApp.$data.isShow = true;
}
}
}).mount('#navbar');⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要试图在挂载点（mount() 的选择器对应元素）上使用任何 Vue 指令（如 v-show、v-if、v-bind），它仅作为“壳”，不参与 Vue 模板编译；
- 若需更清晰的结构或复用逻辑，建议改用单个 Vue 应用 + 路由/动态组件（如 <component :is="currentView"/>），避免多实例状态同步复杂度；
- v-show 通过切换 display: none 控制显隐，适用于频繁切换；若内容初始化开销大，可考虑 v-if 实现惰性渲染。
综上，问题本质不是 v-show 失效，而是使用位置错误——牢记：Vue 指令只在实例模板内部生效，挂载容器本身永远是“静态外壳”。
