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

Question

我是 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 状态时，它似乎没有再次运行 mounted() 挂钩，这表明 component1 似乎没有卸载，它只是切换了道具基本上。

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

我怎样才能做到这一点？

Answer 1

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

Answer 2

您可以使用 key 属性实现此目的为 2 个地图组件指定不同的 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>

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

Conditionally rendering the same component does not trigger mounted() hook

javascript

rendering

conditional-statements

vue.js