有条件地渲染同一个组件不会触发mounted()钩子答案

【问题标题】：Conditionally rendering the same component does not trigger mounted() hook有条件地渲染同一个组件不会触发mounted()钩子
【发布时间】：2020-06-08 12:27:39
【问题描述】：

我对 Vue 很陌生，所以如果我的思维过程有误，请纠正我。我正在尝试有条件地呈现这样的组件：

<div>
  <Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1"></Map>
  <Map v-else mapSrc="src2.jpg" :idList="idList2" :data="dataVariable2"></Map>
</div>

我的目标是根据 v-if 状态用不同的 props 渲染相同的组件。因此，当 bool 为 true 时，它应该呈现第一个组件，而当我将 bool 切换为 false 时，它应该呈现第二个选项。道具似乎正在正确更改，但是当我切换 bool 状态时，它似乎没有再次运行 mount() 钩子，这表明 component1 似乎没有卸载，它基本上只是切换了道具。

我想要的是，当 bool 为 false 时，它应该呈现整个组件实例的新版本，并与之前在组件 1 中发生的事情隔离开来。

我怎样才能做到这一点？

【问题讨论】：

你试过使用v-show吗？ vuejs.org/v2/guide/conditional.html#v-show
感谢您的回答，但 v-show 不是我想要的。 “不同之处在于带有 v-show 的元素将始终被渲染并保留在 DOM 中；v-show 仅切换元素的显示 CSS 属性。”我只希望组件 1 或组件 2 存在于 DOM 中，具体取决于布尔状态。

标签： javascript vue.js conditional-statements rendering

【解决方案1】：

根据 Linus Borg 的回答 here，您应该为它们添加一个唯一的 key 属性。

【讨论】：

【解决方案2】：

您可以通过使用key 属性来实现此目的为 2 个 Map 组件指定不同的key。

<Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1" key="map1"></Map>
  <Map v-else mapSrc="src2.jpg" :idList="idList2" :data="dataVariable2" key="map2"></Map>

【讨论】：