当变量改变时，Vue 3重新加载组件

Question

如果 selectedLeague 已更改，我正在尝试重新分配组件

<label class="label">Select league</label>
<div class="selector">
  <v-select
      v-model="selectedLeague"
      :dropdown-should-open="dropdownShouldOpen"
      :options="leagues"
      label="displayLeague"
      placeholder="Select a league"
  />
</div>

<div v-if="selectedLeague">
  <LeagueTopScorers :is="selectedLeague" :selectedLeague="selectedLeague.id.toString()" />
</div>

在 LeagueTopScorers 组件中，我正在获取 API 以获取选定联赛中的最佳得分手。

我尝试过：watch、v-on:、created()

Answer 1

确实当selectedLeague更改时重新渲染¹，但它不会重新安装。 仅当 selectedLeague 从 falsy 值更改为 truthy 值时才会挂载（因为此时 v-if 更改）。

您的问题存在一些问题：

• 您询问的是技术方面（我们称之为 X），您认为这将解决业务需求（我们称之为 Y）。这是一个经典的 XY 问题。你为什么不描述 Y 的要求？ （例如：您想要实现的目标）。您希望在输入变化时看到什么输出变化？
• 您发布的代码不足以创建可运行示例。我们不知道 v-select 是什么， 是什么，或者 :is 属性在 .

根据您发布的代码片段，我猜测以下内容：

• v-select 是 vue-select 或 Vuetify 选择组件
• 您期望 :is 在 上的工作方式与在 上的工作方式相同。提示：不会，除非你自己编码，我对此表示怀疑
• 最后但并非最不重要的一点是，我想您希望将一些代码放入 的 init 生命周期挂钩中（例如：onMounted）在您将 selectedLeague 中存储的对象替换为另一个对象。

如果我是正确的，实现此行为的最简单、最干净的方法是创建一个计算²：

const leagueId = computed(() => selectedLeague?.id.toString() || '')

...并在 v-if、:key 和 :selectedLeague 中使用它：

<LeagueTopScorers
  v-if="leagueId"
  :selectedLeague="leagueId"
  :key="leagueId" />

（没有

包装器）。

每次 leagueId 更改时，上面都会创建一个 的新实例，并且仅在 leagueId 不为 false 时渲染一个。我相信这就是您在技术上想要实现的目标³。

---

注释：
¹ - 要验证，请使用 onUpdated(() => console.log('updated...'))代码>
2 - 如果selectedLeague，则使用selectedLeague.value?.id.toString()是一个 ref
3 - 同时，我确信无需创建 每次 leagueId 更改时，但如果没有更多详细信息和/或上下文，我无法提供更多帮助