Vue组件切换异常：点击按钮控制台正常但组件未切换

你的问题核心是**selected不是响应式变量**。在Vue 3的<script setup>语法中，直接用let声明的普通变量不具备响应式能力——虽然你能修改它的值并在控制台输出，但Vue无法感知到这个变化，自然不会触发视图更新和组件切换。

解决这个问题有两种常用方式：

方式一：使用ref创建响应式变量 #

修改<script setup>部分，引入ref并用来声明selected：

<script setup>
import A from './A.vue';
import B from './B.vue';
import { ref } from 'vue';

const selected = ref('A');
</script>

模板中的点击事件可以保留直接赋值的写法（Vue模板会自动解析ref的.value），建议把逗号表达式改成分号分隔更规范：

<button @click="selected = 'A'; console.log(selected)">A</button>
<button @click="selected = 'B'; console.log(selected)">B</button>

<A v-if="selected === 'A'" />
<B v-if="selected === 'B'" />

方式二：使用reactive包裹响应式对象 #

如果需要管理多个响应式变量，也可以用reactive创建一个响应式对象：

<script setup>
import A from './A.vue';
import B from './B.vue';
import { reactive } from 'vue';

const state = reactive({
  selected: 'A'
});
</script>

模板中需要通过对象属性访问变量：

<button @click="state.selected = 'A'; console.log(state.selected)">A</button>
<button @click="state.selected = 'B'; console.log(state.selected)">B</button>

<A v-if="state.selected === 'A'" />
<B v-if="state.selected === 'B'" />

本质上，Vue的视图更新完全依赖它的响应式系统，只有当变量被Vue的响应式API（ref/reactive等）包裹后，修改操作才会被监听，进而触发组件重新渲染，实现组件切换的效果。

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